モバイルiOS Safariで再生していない埋め込みYoutube動画

Question

最近、iPhoneのSafariでのバグが見つかりましたが、問題の原因を突き止めることはできません。再生ボタンを押すと、ビデオがロードされたように見えますが、すぐに閉じます。

これまでに見つかったすべての回答は最近ではなく、問題を解決していません。 BrowserStackをテストすると、Youtubeから配信されたwww-embed-player-sprite-mode-vfl9mHoaB.cssファイルのInvalid CSS property declaration at: *というエラーが表示されます。

この問題を回避するために、埋め込み動画を扱うオプションもあります。

コード：

#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 && $howItWorksID != "") 
    #set($hasVideoID = true) 
#end 

<div id="howItWorksModal" class="modal-howItWorks modal fade"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <button type="button" class="close js-modalClose close--howItWorks" data-dismiss="modal"> 
      <span aria-hidden="true">&times;</span> 
      <span class="sr-only">close</span> 
     </button> 
     <div> 
      <div class="prose howItWorks-embedVideoWrapper"> 
       <div class="iframe-container">  
       <iframe id="howItWorks-ModalVersion" class="howItWorks js-howItWorks-iframe" width="100%" src="" frameborder="0" allowfullscreen preload></iframe> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 

    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 + "&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); 
     }) 

Answer 1

mobileVideoSource()が呼び出され、ビデオが開いたときにsrcを除去されました。私はこれがなぜ起こったのか調査しませんでしたが、srcの代わりにiframeを完全に削除するスクリプトを再構成し、（まれなエッジ使用の場合は）画面がモバイルに戻ってサイズ変更され、ユーザーが望む動画をもう一度見る：

function mobileVideoSource() { 
    var mobileBlock = $('#BuyNow-mobileBlock'), 
    currentVid  = $('#howItWorks-MobileVersion'), 
    videoContainer = $('.iframe-container') 
    new_iframe  = $('<iframe id="howItWorks-MobileVersion" class="howItWorks" width="560" height="315" src="$embeddedURL" frameborder="0" allowfullscreen></iframe>'); 

    if (mobileBlock.is(":hidden")) { 
     currentVid.remove(); 
    } else { 
     videoContainer.append(new_iframe); 
    } 
}