chechu
08-10-2017, 10:09 AM
Hey all,
As header for my website I'm displaying a sequel of YouTube videos with the following code:
<script src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: {
'autoplay': 1,
'controls': 0,
'autohide': 1,
'wmode': 'opaque',
'showinfo': 0,
'loop': 1,
'rel': 0,
'playlist': 'jwB1J8FL76s,nvENEbvSMW4,va4vTwOLlrc,ELFdbTwJkJE,9MKvqVTtzzc,MAtwgOsycc0'
},
videoId: '7Qx32a6Hc8w',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target();
$('#text').fadeIn(400);
}
$(window).scroll(function() {
var hT = $('.m-video').height(),
wS = $(this).scrollTop();
if (wS > hT) {
player.pauseVideo();
}
else {
player.playVideo();
}
});
</script>
<div class="headersection" id="home">
<div class="container-fluid">
<div class="row">
<div style="max-width:100%;margin:0 auto;">
<div style="position: relative;padding-bottom: 56.25%; height: 0; overflow: hidden;">
<div id="player" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; max-width: 100%; max-height: 100%;"></div>
</div>
</div>
<div class="cover">
<div class="hi">
<span><a href="#overview" class="download-link hidden-xs"><div class="bounce"><i class="bouncefa fa-angle-down"></i></div></a></span>
</div>
</div>
</div>
</div>
</div>
I would like to add an explanation at the bottom of the screen (so responsive), shown as overlay on the video, that changes with every displayed video. So every video has its own description.
This is the site: www.brunomazereel.com (http://www.brunomazereel.com)
Is that possible?
As header for my website I'm displaying a sequel of YouTube videos with the following code:
<script src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: {
'autoplay': 1,
'controls': 0,
'autohide': 1,
'wmode': 'opaque',
'showinfo': 0,
'loop': 1,
'rel': 0,
'playlist': 'jwB1J8FL76s,nvENEbvSMW4,va4vTwOLlrc,ELFdbTwJkJE,9MKvqVTtzzc,MAtwgOsycc0'
},
videoId: '7Qx32a6Hc8w',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target();
$('#text').fadeIn(400);
}
$(window).scroll(function() {
var hT = $('.m-video').height(),
wS = $(this).scrollTop();
if (wS > hT) {
player.pauseVideo();
}
else {
player.playVideo();
}
});
</script>
<div class="headersection" id="home">
<div class="container-fluid">
<div class="row">
<div style="max-width:100%;margin:0 auto;">
<div style="position: relative;padding-bottom: 56.25%; height: 0; overflow: hidden;">
<div id="player" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; max-width: 100%; max-height: 100%;"></div>
</div>
</div>
<div class="cover">
<div class="hi">
<span><a href="#overview" class="download-link hidden-xs"><div class="bounce"><i class="bouncefa fa-angle-down"></i></div></a></span>
</div>
</div>
</div>
</div>
</div>
I would like to add an explanation at the bottom of the screen (so responsive), shown as overlay on the video, that changes with every displayed video. So every video has its own description.
This is the site: www.brunomazereel.com (http://www.brunomazereel.com)
Is that possible?