嵌入式Youtube視頻不能在手機iOS遊戲中使用

Question

最近我們發現了一個在iPhone上使用Safari瀏覽器存在只有的問題，但我無法確定問題的根源。當按下播放按鈕時，視頻似乎會加載，但會立即關閉。

我發現迄今爲止所有的答案都不是最近的和/或不解決問題。在BrowserStack測試給我這個錯誤：Invalid CSS property declaration at: *從Youtube上提供的www-embed-player-sprite-mode-vfl9mHoaB.css文件。

我也接受處理嵌入式視頻的可選方式以避免此問題。

的代碼：

#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當視頻被打開。我沒有調查爲什麼會發生這種情況，但是我重新構建了腳本以完全刪除iframe而不是src，並且注入了一個新實例（如果是用於任何罕見的邊緣用例），屏幕的大小會縮減回移動設備並且用戶想要再次觀看視頻：

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); 
    } 
}