title: HTML5 Audio & Video pause function on page change
body: <p>I have several separate pages in my html. The nav home page has a youtube vid embedded. There is also a nav music page which incorporates 5 album/cds each with it's own playlist/audio player. How can I stop the video and/or audio from playing when the page changes? The nav has 6 links (home, music, about, gigs, lyrics, contact.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
    $('#home').load('home.html');
    $('#music').load('player.html');
    $('#about').load('about.html');
    $('#gigs').load('gigs.html');
    $('#contact').load('contact.html'); 
   })
   
   $('.menu a').on('click', function() {
   
  $('#utube')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); 
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
     &lt;div class="hambtn" onclick="openNav()"&gt;&amp;#9776;&lt;/div&gt;
    &lt;div id="sidenav" class="menu"&gt;
     &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
     &lt;a href="#home"&gt;home&lt;/a&gt;
     &lt;a href="#music"&gt;music&lt;/a&gt;
     &lt;a href="#about"&gt;about&lt;/a&gt;
     &lt;a href="#gigs"&gt;gigs&lt;/a&gt;
     &lt;a href="#contact"&gt;&lt;span&gt;contact&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;section&gt;
   &lt;article&gt;
    &lt;div id="home"&gt;&lt;/div&gt;
    &lt;div id="music"&gt;&lt;/div&gt;
   &lt;/article&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;utube responsive&lt;/title&gt;
  &lt;style type="text/css"&gt;
  #utube{
   margin:0 auto;
   width:80%;
   height:auto;
  }
  .video-responsive{
      overflow:hidden;
      padding-bottom:56.25%;
      position:relative;
      height:0;
  }
  .video-responsive iframe{
      left:0;
      top:0;
      height:100%;
      width:100%;
      position:absolute;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="utube" class="video-responsive"&gt;&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/5Q-8kRVjAe8?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>