title: Embedded Youtube videos not playing in mobile iOS Safari
body: <p>Recently we've found a bug that exists <em>only</em> in Safari on iPhone(s) however I cannot pinpoint the source of the issue. When pressing the play button the video appears to load but then closes immediately.</p>
  
  <p>All answers I've found so far aren't recent and/or don't solve the problem. Testing in BrowserStack is giving me this error: <code>Invalid CSS property declaration at: *</code> from the www-embed-player-sprite-mode-vfl9mHoaB.css file served from Youtube.</p>
  
  <p>I'm also open to optional ways of handling embedded videos to avoid this issue.</p>
  
  <p>The code:</p>
  
  <pre><code>#set($showVideo = $request.getParameter("showVideo"))
  #set($howItWorksID = $placeholder.getAttributeValueGroup().getAttributeValue('product_howitworks', $sesShoppingCart.getLocale()))
  #set($embeddedURL = "https://www.youtube.com/embed/" + $howItWorksID + "?rel=0")
  #set($hasVideoID = false)
  #if( $howItWorksID &amp;&amp; $howItWorksID != "" )
      #set( $hasVideoID = true )
  #end
  
  &lt;div id="howItWorksModal" class="modal-howItWorks modal fade"&gt;
    &lt;div class="modal-dialog modal-lg"&gt;
      &lt;div class="modal-content"&gt;
          &lt;button type="button" class="close js-modalClose close--howItWorks" data-dismiss="modal"&gt;
              &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
              &lt;span class="sr-only"&gt;close&lt;/span&gt;
          &lt;/button&gt;
          &lt;div&gt;
              &lt;div class="prose howItWorks-embedVideoWrapper"&gt;
                &lt;div class="iframe-container"&gt;    
                  &lt;iframe id="howItWorks-ModalVersion" class="howItWorks js-howItWorks-iframe" width="100%" src="" frameborder="0" allowfullscreen preload&gt;&lt;/iframe&gt;
                &lt;/div&gt;
             &lt;/div&gt;
          &lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
      jQueryReady(function() {
  
              var videoURL = "$embeddedURL";
  
              // Load destination video and autoplay when modal opens
              $("#howItWorksModal").on('shown.bs.modal', function(ev) {
                  ev.preventDefault();
                  $("#howItWorks-ModalVersion").attr("src", videoURL + "&amp;autoplay=1");
                  console.log('clicked on');
              });
  
              // Kill video when modal is closed
              $('#howItWorksModal').on('hidden.bs.modal', function (e) {
                  $('.js-howItWorks-iframe').each( function(){
                      $(this).attr('src', '');
                  });
              });
  
              // Kill mobile video if playing while window is resized
              function mobileVideoSource(){
                  var mobileBlock = $('#BuyNow-mobileBlock'),
                      howToVid_mobile = $('#howItWorks-MobileVersion');
  
                  if (mobileBlock.is(":hidden")) {
                      // if mobile block is hidden remove it's source
                      howToVid_mobile.attr('src', '');
                  } else {
                      // if mobile block is displayed add a source
                      howToVid_mobile.attr('src', videoURL);
                  }
              }
  
              sdi.window.on('resize', mobileVideoSource);
          })
  </code></pre>