title: How to stop YouTube video when hidding a Div
body: <p>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)</p>
  
  <p>I'm trying to build a website where different pages are shown by using a function that hides/shows different <code>divs</code>. 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 <code>div</code> is hidden. Right now, the video just keeps playing in the background (you can hear the sound), if you change to another page/div.</p>
  
  <p>After some sleuthing on the internet (i.e. this website), I finally got a solution working which is as follows.</p>
  
  <pre><code>var stopButton = document.getElementById('fecharvideo');
  
  stopButton.onclick = function() {
   var myPlayer = document.getElementById("player"); 
   myPlayer.setAttribute("src", " ");
  }; 
  </code></pre>
  
  <p>Unfortunately, as you can probably guess. This means that after clicking on an element with the  <code>id=fecharvideo</code>, the  <code>iframe</code> simply disappears, meaning if you return to that <code>div</code> the video will no longer appear, which is not ideal.</p>
  
  <p>Any similar solution to this problem that allows me to reset the video, instead of deleting it altogether?</p>
  
  <p>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"): <a href="https://jsfiddle.net/Santos1600/qu8ejwsm/20/" rel="nofollow noreferrer">https://jsfiddle.net/Santos1600/qu8ejwsm/20/</a></p>