启用自动播放和全屏功能的嵌入YouTube视频

Question

我在网页上嵌入了一个YouTube视频，客户希望视频可以自动播放，并且用户可以全屏查看。但是似乎这两者是互斥的，当自动播放有效时，视频底部的全屏功能就无法使用。当移除自动播放代码时，全屏功能就可以使用了。

<p style="text-align: center;">
  <iframe src="//youtube.com/embed/4liKzXo2lRM?rel=0&autoplay=1";; modestbranding=1&amp;controls=0&amp;showinfo=1" width="700" height="394" frameborder="0" allow="autoplay; allowfullscreen="allowfullscreen">
    <span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
  </iframe>
</p>

- Kate Slott

---

你好，欢迎来到StackOverflow！为了获得更好的答案，并且避免你的回答被删除，你需要阅读并遵守一些基本规则和约定，这将有助于大家更好地沟通和帮助。请访问https://stackoverflow.com/help，阅读关于主题“我可以在这里询问哪些问题？”和“应避免提出哪些类型的问题？”的内容。你必须包括你已经做过的工作的摘要，以解决这个问题。 - Jonathan Gagne

谢谢Jonathan。我是Stack Overflow的新手，不确定我需要提供哪些详细信息。客户希望视频自动播放，并且用户可以将其全屏。以下是代码：<p style="text-align: center;"><iframe src="https://www.youtube.com/embed/4liKzXo2lRM?rel=0&autoplay=1"; modestbranding=1&controls=0&showinfo=1" width="700" height="394" frameborder="0" allow="autoplay; allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe></p> - Kate Slott

阅读它，你会看到它会要求你提供“语言类型”，一个短的例子 <embeded-like-a-champion></embeded-like-a-champion>。为了查看是否有你可能会错过的内容，还有更多…..你会看到真的很有趣。 - Jonathan Gagne

看到了，现在我知道你使用纯HTML和iframe，这已经为我提供了非常好的信息。最好的方法是将其包含在你的问题中，让我为你编辑它，我会向你展示如何创建一个代码片段。 - Jonathan Gagne

谢谢你的帮助，Jonathan。我对这个还很陌生。 - Kate Slott

Answer 1

<iframe src="https://youtube.com/embed/4liKzXo2lRM?rel=0&autoplay=1" allow="autoplay; allowfullscreen" allowfullscreen></iframe>

上述代码对我有效。

这是我演示它工作的Youtube视频：https://www.youtube.com/watch?v=RP5G2OaLpB4

- user13096898

Answer 2

我在寻找解答相同问题的过程中刚好发现了你的问题。感谢你的代码，让我成功解决了这个问题。 或许可以尝试使用 allow="fullscreen; autoplay" 和单独使用 allowfullscreen， 为了在 Chrome 中使其正常工作，还需要添加 muted（https://developers.google.com/web/updates/2017/09/autoplay-policy-changes）。

对我来说这个方法有效。

<p style="text-align: center;">
  <iframe src="//youtube.com/embed/4liKzXo2lRM?rel=0&autoplay=1";; modestbranding=1&amp;controls=0&amp;showinfo=1" width="700" height="394" frameborder="0" allow="autoplay; fullscreen" allowfullscreen muted>
    <span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
  </iframe>
</p>

- dlemm