Javascript 未在移动iOS Safari中播放的嵌入式Youtube视频

最近，我们发现了一个只存在于iPhone上Safari中的bug，但我无法确定问题的根源。当按下播放按钮时，视频显示为加载，但随后立即关闭

到目前为止，我找到的所有答案都不是最新的和/或不能解决问题。在BrowserStack中测试时出现以下错误：

无效的CSS属性声明：

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

#set（$showVideo=$request.getParameter（“showVideo”））
#set（$howItWorksID=$placeholder.getAttributeValueGroup（）.getAttributeValue（'product_howitworks'，$seShoppingCart.getLocale（）））
#设置（$embeddedURL=”https://www.youtube.com/embed/“+$howItWorksID+”？rel=0”）
#设置（$hasVideoID=false）
#如果（$howItWorksID&&$howItWorksID！=“”）
#设置（$hasVideoID=true）
#结束
&时代；
关闭
jQueryReady（函数（）{
var videoURL=“$embeddedrl”；
//模式打开时加载目标视频和自动播放
$（“#howItWorksModal”）.on（'show.bs.modal'，function（ev）{
ev.preventDefault（）；
$（“#howItWorks ModalVersion”）.attr（“src”，videoURL+“&autoplay=1”）；
log（'clicked on'）；
});
//关闭模式时停止视频
$（'howItWorksModal'）。on（'hidden.bs.modal'，function（e）{
$（'.js howItWorks iframe'）。每个（函数（）{
$（this.attr（'src'，''）；
});
});
//如果在调整窗口大小时播放，则停止移动视频
函数mobileVideoSource（）{
var mobileBlock=$（“#立即购买mobileBlock”），
howToVid_mobile=$（“#howtworks MobileVersion”）；
if（mobileBlock.is（“：hidden”））{
//如果移动块被隐藏，请删除其源
howToVid_mobile.attr（'src'，''）；
}否则{
//如果显示“移动块”，请添加源
howToVid_mobile.attr（'src'，videoURL）；
}
}
sdi.window.on（'resize'，mobilevidesource）；
})

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

函数mobileVideoSource（）{
var mobileBlock=$（“#立即购买mobileBlock”），
currentVid=$（“#如何使用MobileVersion”），
videoContainer=$（'.iframe容器'）
新的_iframe=$（''）；
if（mobileBlock.is（“：hidden”））{
currentVid.remove（）；
}否则{
videoContainer.append（新的iframe）；
}
}

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

函数mobileVideoSource（）{
var mobileBlock=$（“#立即购买mobileBlock”），
currentVid=$（“#如何使用MobileVersion”），
videoContainer=$（'.iframe容器'）
新的_iframe=$（''）；
if（mobileBlock.is（“：hidden”））{
currentVid.remove（）；
}否则{
videoContainer.append（新的iframe）；
}
}