Блог

Главная - Вопросы по программированию - Как сделать так, чтобы видео с YouTube исчезало при прокрутке вниз html

Как сделать так, чтобы видео с YouTube исчезало при прокрутке вниз html

#javascript #html

Вопрос:

Я хочу знать, как сделать так, чтобы видео с YouTube исчезло, пока я прокручиваю страницу вниз.

Изображение 1
Изображение 2

     <!-----------------------------VIDEO E TEXTO------------------------------------->

      <br> 
      <br>
      <br>
      <div class="vid-container">
      <div style="max-width:1280px;margin:0 auto; padding:5px; " >
        <div style="position: relative;padding-bottom: 56.25%; height: 0; overflow: hidden;">
         <iframe width="1280" height="720" frameborder="0" allowfullscreen="" autoplay src="https://www.youtube.com/embed/WSYWLB3QKik?autoplay=1amp;mute=1"  style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; max-width: 1280px; max-height: 720px;" tabindex="-1"></iframe>
        </div>
        </div>
       </div>


    <section>
        <div class="content">
            <p>Hardwell (nascido como Robbert van de Corput em Breda, Holanda) é um produtor progressivo de electro house DJ. Em 2009 , após o sucesso de “Show Me Love vs.Be”, ele começou a produzir várias outras track “singles” de sucesso na EDM como “Encoded” e “Cobra” e também começou a forma grandes parcerias como o seu ídolo de infância DJ Tiesto e entre outros nomes da musica eletrônica.
                
  

</body>

</html>

(Академическая работа)

Ответ №1:

Вы можете посмотреть на событие wheel.

 window.addEventListener("wheel", function(e)
{
    let Video = document.querySelector("iframe");

    //If deltaY bigger than zero that means we are scrolling down.
    if(e.deltaY > 0)
    {
        Video.style.display = "none";
    }
    else
    {
        Video.style.display = "initial";
    }
});
Метки: ,