varun-r-mallya/wona.github.com
1
0
Fork 0
mirror of https://github.com/WatchOutNewsAgency/wona.github.com.git synced 2026-01-01 01:16:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed youtube video display

Browse Source
This commit is contained in:
Asutosh Palai
2016-07-04 07:44:44 -04:00
parent 2c582ca9c2
commit 5bc6cc62ec
3 changed files with 27 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/base.scss
View File

@ -323,6 +323,7 @@ body {
z-index: 10; z-index: 10;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
pointer-events: none;
h1 { h1 {
font-weight: bold; font-weight: bold;
line-height: 0.98; line-height: 0.98;
@ -339,7 +340,8 @@ body {
.carousel-inner{ .carousel-inner{
.video-container { .video-container {
height: 90%; width: 70%;
padding: 2%;
} }
> .item > img { > .item > img {

5
index.html
View File

@ -73,10 +73,10 @@ title: "Home"
<div class="container"> <div class="container">
<div class="video-container center-both"> <div class="video-container center-both">
<div class="embed-responsive embed-responsive-16by9"> <div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/{{ video.id }}" frameborder="0" allowfullscreen></iframe> <iframe class="youtube-video" id="youtube-video-{{ video.id }}" data-id="{{ video.id }}" src="https://www.youtube.com/embed/{{ video.id }}?enablejsapi=1" allowfullscreen></iframe>
</div> </div>
</div> </div>
<div class="carousel-caption"> <div class="carousel-caption" id="youtube-title-{{ video.id }}" data-id="{{ video.id }}">
<h1>{{ video.title }}</h1> <h1>{{ video.title }}</h1>
</div> </div>
</div> </div>
@ -97,4 +97,5 @@ title: "Home"
<span <span
class="sr-only">Next</span> class="sr-only">Next</span>
</a> </a>
<script type="text/javascript" src="https://www.youtube.com/iframe_api" async></script>
</div><!-- /.carousel --> </div><!-- /.carousel -->

20
js/application.js
View File

@ -6,3 +6,23 @@ $(function() {
$(this).addClass(imgClass); $(this).addClass(imgClass);
}) })
}); });
function onYouTubeIframeAPIReady() {
$('.youtube-video').each(function() {
var id = $(this).data('id');
var player = new YT.Player('youtube-video-' + id, {
events: {
'onStateChange': onPlayerStateChange
}
});
function onPlayerStateChange(event) {
if(event.data === YT.PlayerState.ENDED || event.data === YT.PlayerState.PAUSED)
$('#youtube-title-' + id).show();
else
$('#youtube-title-' + id).hide();
}
});
}