如何向 HTML 上的 Youtube 视频添加自动播放和循环播放？

Question

我在为我想放在 HTML 网站上的视频添加自动播放时遇到问题。添加 ?autoplay=1 或 &autoplay=1 无效。 -- 与循环相同

<div class="videoContainer">
    <iframe class="videoContainer__video" width="560" height="315" src="https://www.youtube.com/embed/HWl8XAOQnTg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe>
</div>

Answer 1

你好我的朋友，你可以找到正确嵌入 YouTube 视频的正确步骤；

在计算机上，转到您要嵌入的 YouTube 视频。
点击视频下方的分享。
单击“嵌入”。
从出现的框中，复制 HTML 代码。
将代码粘贴到您的博客或网站中 HTML。

要让您的视频自动播放，请使用此 src="https://www.youtube.com/embed/HWl8XAOQnTg?rel=0&controls=0&showinfo=0;autoplay=1&mute=1" 并在您的代码中添加 allow="autoplay; encrypted-media"。使用上述步骤首先通过 youtube 嵌入您的视频，然后将 autoplay=1 添加到您的视频 url。

我知道您说过您已经尝试添加 autoplay=1 但它可能会帮助您按照我的步骤重试。让我知道你过得怎么样。

Answer 2

这里使用这个： 打开下面的代码笔LINK 它也会循环播放您的视频：（运行视频的缓存版本，查看@Turnip 评论）

;&autoplay=1;&loop=1;&playlist=HWl8XAOQnTg

https://codepen.io/GAUTAMRAJU15/pen/MqLJRa

<iframe class="videoContainer__video" width="560" height="315"     src="https://www.youtube.com/embed/HWl8XAOQnTg?rel=0&amp;&amp;showinfo=0;&autoplay=1;&loop=1;&playlist=HWl8XAOQnTg"> </iframe>

Answer 3

不依赖似乎对我不起作用的参数——2018 年 9 月的解决方法（奖励：为 #yt-wrap 设置宽度和高度 CSS 而不是硬编码JS):

<div id="yt-wrap">
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="ytplayer"></div>
</div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      width: '100%',
      height: '100%',
      videoId: 'VIDEO_ID',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
    player.mute(); // comment out if you don't want the auto played video muted
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      player.seekTo(0);
      player.playVideo();
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

Answer 4

自动播放和静音循环，适用于 2022 年的手机和所有浏览器。并非我所有的代码只是我从其他聪明人那里盗版的不同部分。只需输入您自己的视频 ID

<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div class="iframe-container">
  <div id="player"></div>
</div>
<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      width: '100%',
      videoId: 'YOgtEDP5mlE',
      playerVars: { 'autoplay': 1, 'playsinline': 1, 'rel': 0, 'loop': 1, 'autopause': 0 },
      events: {
        'onReady': onPlayerReady,
'onStateChange':onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
   event.target.mute();
    event.target.playVideo();
  }
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      player.seekTo(0);
      player.playVideo();
    }
  }
</script>

<style>
/* Make the youtube video responsive */
  .iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
  }
  .iframe-container iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

如何向 HTML 上的 Youtube 视频添加自动播放和循环播放？

How to add autoplay and a loop to a Youtube video on HTML?

html

youtube

autoplay