Moh*_*ABI 7 javascript youtube
我获得了这段代码，可以在点击图片时以动态方式嵌入youtube视频，但效果正常，但点击时不会自动播放。
它在mozilla中工作正常，但在chrome中不工作。
我在网页中放置图片（视频缩略图）而不是视频iframe以减少页面加载，并且当单击这些缩略图时，我通过jquery动态加载了iframe，一切工作正常，但是加载的视频无法自动播放，但给了另一个按钮播放youtube视频。
我希望在点击Chrome时自动播放。请帮忙
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>YouToubes replace example</title>
<script src="jquery-1.11.2.min.js"></script>
<style>
p {margin-bottom:2em;}
iframe,.ytLoader {display:block;margin:0 auto;width:50vw;height:37.5vw;border:0.5vw solid #ccc;}
.ytLoader {position:relative;cursor:pointer;overflow:hidden;}
.ytLoader>.cover {width:100%;height:auto;}
.ytLoader>.playBtn {position:absolute;top:50%;left:50%;width:20%;height:auto;transform:translate(-50%,-50%);opacity:0.5;}
</style>
<script>
function youTubes_makeDynamic() {
var $ytIframes = $('iframe[src*="youtube.com"]');
$ytIframes.each(function (i,e) {
var $ytFrame = $(e);
var ytKey; var tmp = $ytFrame.attr('src').split(/\//); tmp = tmp[tmp.length - 1]; tmp = tmp.split('?'); ytKey = tmp[0];
var $ytLoader = $('<div class="ytLoader">');
$ytLoader.append($('<img class="cover" src="https://i.ytimg.com/vi/'+ytKey+'/hqdefault.jpg">'));
$ytLoader.append($('<img class="playBtn" src="play_button.png">'));
$ytLoader.data('$ytFrame',$ytFrame);
$ytFrame.replaceWith($ytLoader);
$ytLoader.click(function () {
var $ytFrame = $ytLoader.data('$ytFrame');
$ytFrame.attr('src',$ytFrame.attr('src')+'?autoplay=1');
$ytLoader.replaceWith($ytFrame);
});
});
};
$(document).ready(function () {youTubes_makeDynamic()});
</script>
</head>
<body>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
</body>
</html>从版本62开始，此功能是Chrome的一项功能-避免在打开页面时烦人的广告向您大声疾呼（https://developers.google.com/web/updates/2017/09/autoplay-policy-更改）。
除非用户为该站点激活它，否则它将不会自动播放。Chrome现在已经内置了。
您可以在设置中为自己的安装更改它。
根据@Narendra的评论，Chrome正在阻止自动播放，因此您依赖自动播放来假装自己对用户的点击做出了反应。
我可以想到2种解决方案：
解决方案1：更改应用的用户体验，以便在单击缩略图时可以清楚地看到该视频需要再次单击才能运行，例如通过在模式中打开它。
解决方案2 ：（未经测试）将播放控制权还给视频：
您显示快速加载的缩略图
您加载视频而无需等待用户点击它。为了保持快速加载，您可以等待空闲时间来创建基础iframe https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback
将鼠标悬停在缩略图上时，您将隐藏该缩略图，并显示以下视频。单击时，它应该播放。