滚动到特定点

时间:2017-05-10 11:26:28

标签: javascript html css html5 youtube-iframe-api

我需要在滚动到网站的特定点时移除youtube iframe。这就是我到目前为止所做的。通过使用此脚本,我隐藏了包含youtube iframe的部分,但视频仍在播放My website link

.rem{
display:none;
}

				
        <script>
			$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    var section1Height = $('#types-of-repair').offset().top + $('#types-of-repair').outerHeight() - window.innerHeight;
   if (scroll >= 3) {
       
        $(".about-section").addClass("rem"); 
       $(".clearHeader111").addClass("rem"); 
       
    }
 
     
   
});
    </script>
				<section class="about-section">
     <div class="pattern"></div>
               <div class="clearHeader1 video-background">
    <div class="clearHeader11 video-foreground">
    
      <iframe class="clearHeader111" src="https://www.youtube.com/embed/DEDS-bSHRfI?controls=1&showinfo=1&rel=0&autoplay=1&loop=1&&amp;ecver=1" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  </section>

1 个答案:

答案 0 :(得分:0)

也许这不是你想要的,但是;

我会为它添加暂停触发器以停止播放音乐。

我无法使用您的代码段来测试它,但添加类似的内容应该可以。

document.getElementByClassName('clearHeader111').iframe.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');

您也可以将pauseVideo替换为playVideo

来改变其效果