I have a fullwidth container that contains a YouTube video. I need that when the scroll is done the div is hidden and the video stops reproducing. I managed to hide the div when scrolling but I can not pause the video.
Right now I have the following code:
// EFECTOS SCROLL START:
var lastScrollTop = 20;
var section = $('#start');
var container = $(".center_content_start");
$(window).scroll(function (event) {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
section.addClass('fuera');
} else {}
lastScrollTop = st;
});
$(document).click(function () {
section.addClass('fuera');
});
$(".h1_start_content ").click(function (event) {
section.removeClass('fuera');
event.stopPropagation();
});#start {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
flex-direction: row;
justify-content: center;
height: 100vh;
background-color: @blanco;
z-index: 9999999999;
transition: all 2s ease-in-out;
overflow: hidden;
}
.center_content_start {
display: flex;
width: 100%;
max-width: 1920px;
flex-direction: column;
justify-content: space-around;
align-content: center;
align-items: center;
height: 100vh;
}
.h1_start_content {
// flex: 0 1 45%;
// position: relative;
width: 100%;
}
/*video youtube*/
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*fin video youtube*/
.img_start_content {
flex: 0 1 30%;
// padding-top: 40px;
text-align: center;
}
.h1_start_content .span_start a {
color: @negro;
font-family: @akrobat !important;
font-size: 7vw;
width: 100%;
line-height: 1;
text-transform: uppercase;
transition: all 0.2s ease-in-out;
}
.phrase_separator {
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 100%;
align-items: flex-end;
}
.phrase_separator:hover span {
cursor: pointer;
background-color: yellow;
transition: all 0.5s ease-in-out;
}
.phrase_separator:hover p {
cursor: pointer;
background-color: yellow;
transition: all 0.5s ease-in-out;
}
#span_1 {
font-family: 'Playfair Display', serif;
z-index: 999999;
opacity: 0;
}
#div_1:hover span {
opacity: 1;
ransition: all 0.5s ease-in-out;
}
#div_2:hover span {
opacity: 1;
ransition: all 0.5s ease-in-out;
}
#div_3:hover span {
opacity: 1;
ransition: all 0.5s ease-in-out;
}
#div_4:hover span {
opacity: 1;
ransition: all 0.5s ease-in-out;
}
.fuera {
top: -5000px !important;
transition: all 2s ease-in-out;
}<section id="start" class="ocultar">
<div class="center_content_start">
<div class="h1_start_content slideInLeft animated margin_element video-container">
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0"width="100%" height="443" type="text/html" src="https://www.youtube.com/embed/eYsYQr0U14U?autoplay=0&fs=1&iv_load_policy=3&showinfo=0&rel=0&cc_load_policy=0&start=0&end=0&origin=https://youtubeembedcode.com"></iframe>
</div>
</div>
</section>With this code I get the video to hide when I scroll, but I can not pause it when I hide it, since it is a nuisance that the video continues sounding when you are not watching it.
I found this website: link where a video is paused when clicking, is something similar to what I want to do, but as I said before I need to do it when I scroll.
How can I do it? Right now I am trying the following code, but it does not respond:
// EFECTOS SCROLL START:
var lastScrollTop = 20;
var section = $('#start');
var container = $(".center_content_start");
var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
var div = document.getElementById("popupVid");
$(window).scroll(function (event) {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
section.addClass('fuera');
var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
func = event == 'hide' ? 'pauseVideo' : 'playVideo';
iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*');
} else {}
lastScrollTop = st;
}); <div id="popupVid" class="h1_start_content slideInLeft animated margin_element video-container">
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0"width="100%" height="443" type="text/html" src="https://www.youtube.com/embed/eYsYQr0U14U?autoplay=0&fs=1&iv_load_policy=3&showinfo=0&rel=0&cc_load_policy=0&start=0&end=0&origin=https://youtubeembedcode.com"></iframe>
</div>