CODEWITHSUNDEEP
javascripthtmlvideoiframeyoutube
Santos1600
Santos1600

Reputation: 103

How to stop YouTube video when hidding a Div

I've made a similar question in the past, but I decided to try again since I have gone in a different direction since then. (I was trying with YouTube API and wasn't getting anywhere with that)

I'm trying to build a website where different pages are shown by using a function that hides/shows different divs. One of those pages has a video from YouTube and I was trying to figure out a way to stop the video when the respective div is hidden. Right now, the video just keeps playing in the background (you can hear the sound), if you change to another page/div.

After some sleuthing on the internet (i.e. this website), I finally got a solution working which is as follows.

var stopButton = document.getElementById('fecharvideo');

stopButton.onclick = function() {
 var myPlayer = document.getElementById("player"); 
 myPlayer.setAttribute("src", " ");
};

Unfortunately, as you can probably guess. This means that after clicking on an element with the id=fecharvideo, the iframe simply disappears, meaning if you return to that div the video will no longer appear, which is not ideal.

Any similar solution to this problem that allows me to reset the video, instead of deleting it altogether?

Here's the fiddle (To test it out Open "Episódio 1", start video, Open "Episódios" through the hamburger menu, and then back to "Episódio 1"): https://jsfiddle.net/Santos1600/qu8ejwsm/20/

Upvotes: 1

Views: 148

Answers (1)

Santos1600
Santos1600

Reputation: 103

Solution:

html

<div id="ep1" class="ep1" style="display: none;">
  <div class="video-background">
    <div class="video-foreground">
      <iframe id="player" src="https://www.youtube.com/embed/videoseries?list=**PLAYLISTID**&modestbranding=1&iv_load_policy=3&rel=0&showinfo=0&loop=1&autoplay=1&autohide=1&enablejsapi=1&playerapiid=ytplayer1" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
    </div>
  </div>
  <div class="container">

        <!--Menu/Episódio 1-->
          <div id="myNav2" class="overlayep">
              <div class="overlay-content">
                <ul>
                  <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','episodios'); toggleVideo(video1,'stopVideo');">EPISÓDIOS</a></li>
                  <ul><li><a href="#">POEMA MEDRICAS</a></li>
                      <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','ep2'); toggleVideo(video1,'stopVideo');">O CÃO</a></li>
                      <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','ep3'); toggleVideo(video1,'stopVideo');">TERAPIA À DISTÂNCIA</a></li>
                      <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','ep4'); toggleVideo(video1,'stopVideo');">MANIA DA PERSEGUIÇÃO</a></li>
                  </ul>
                  <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','sobre'); toggleVideo(video1,'stopVideo');">SOBRE</a></li></ul>
              </div>
            </div>
            <div class="botaomenu" onclick="myFunction(this); toggleNav2();">
              <div class="bar1"></div>
              <div class="bar2"></div>
              <div class="bar3"></div>
  </div>


  <a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','segunda'); toggleVideo(video1,'stopVideo');"><img src="assets/logohorizontal.png" alt="logo" class="logosmall"></a>
</div>
</div>

js

var video1 = document.getElementById('player')
function toggleVideo(a, state) { 
  var iframe = a.contentWindow;
  iframe.postMessage('{"event":"command","func":"' + state + '","args":""}', '*'); 
}

Upvotes: 1

Related Questions