title: Mute HTML5 video on subsequent visit
body: <p>I am using Reveal Modal (<a href="http://zurb.com/playground/reveal-modal-plugin" rel="nofollow">http://zurb.com/playground/reveal-modal-plugin</a>) to fire off a modal pop-up box on the visitor's first visit <em>only</em>, setting a cookie using jQuery Cookie (<a href="https://github.com/carhartl/jquery-cookie" rel="nofollow">https://github.com/carhartl/jquery-cookie</a>). </p>
  
  <p>Here is the code for the modal (shows a GIF on mobile devices):</p>
  
  <pre><code>&lt;div id="myModal" class="reveal-modal"&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
      var myModal = document.getElementById('myModal');
  
      if(!isMobile) {
      // User-Agent is not IPhone, IPod, IPad, Android or BlackBerry
      myModal.innerHTML += '&lt;video autoplay&gt;' +
      '&lt;source src="video/LogoOpening.mp4" type="video/mp4"/&gt;' +
      '&lt;source src="video/LogoOpening.ogg" type="video/ogg"/&gt;' +
      '&lt;source src="video/LogoOpening.webm" type="video/webm"/&gt;' +
      '&lt;/video&gt;' +
      '&lt;a class="close-reveal-modal"&gt;&lt;div class="button4"&gt;Close&lt;/div&gt;&lt;/a&gt;';
      } else {
      myModal.innerHTML += '&lt;img src="images/ThroughTheYears.gif" alt="Logo History" /&gt;' +
      '&lt;a class="close-reveal-modal"&gt;&lt;div class="button4"&gt;Close&lt;/div&gt;&lt;/a&gt;' +
      '&lt;/div&gt;';
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>...and here is the Javascript that fires off the modal after checking for the cookie:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function() {
      if ($.cookie('modal_shown') == null) {
          $.cookie('modal_shown', 'yes', { expires: 30, path: '/' });
          $('#myModal').reveal({
           animation: 'fade',                         //fade, fadeAndPop, none
           animationspeed: 500,                       //how fast animtions are
           closeonbackgroundclick: true,              //if you click background will modal close?
           dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
           });
      }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>So, here's the issue:</strong> when my visitor shows up the first time, the video fires off perfectly and plays automatically, just like it should <em>(a similar animated GIF plays on mobile devices only)</em>; however, the video has sound, and on subsequent visits the video autoplays and you <em>hear</em> the audio, but the modal doesn't <em>visually</em> fire off (the modal and video stays hidden).</p>
  
  <p>I think the solution would be to somehow tie the video's mute attribute to the cookie checking Javascript (which determines whether the modal fires or not), but I'm not sure how to code that. <strong>Help?</strong></p>