怎样在HTML中插入一个YouTube视频？ 视频嵌入教程

在HTML中嵌入YouTube视频，其实就是利用YouTube提供的iframe代码，简单复制粘贴就能搞定。不过，想要更灵活地控制视频播放，还得了解一些参数设置。

解决方案

1. 找到YouTube视频的嵌入代码： 在YouTube视频下方，点击“分享”按钮，然后选择“嵌入”。你会看到一段HTML代码，通常是以

   <iframe>

   标签开始的。

   立即学习“前端免费学习笔记（深入）”；

   

2. 复制嵌入代码： 完整复制这段代码。

3. 粘贴到你的HTML文件中： 将复制的代码粘贴到你想要显示视频的位置。

   

4. 调整尺寸（可选）：

   <iframe>

   标签中通常包含

   width

   和

   height

   属性，可以修改这些值来调整视频的显示大小。

5. 自定义参数（可选）： 你还可以添加一些参数到

   <iframe>

   标签的

   src

   属性中，例如：

   • autoplay=1

     ：自动播放视频（注意：某些浏览器可能会阻止自动播放）。

   • loop=1

     ：循环播放视频。

   • controls=0

     ：隐藏播放器控件。

   • start=N

     ：从视频的第N秒开始播放。

   • mute=1

     ：静音播放。

   这些参数需要添加到

   src

   属性的URL后面，用

   ?

   分隔第一个参数，用

   &

   分隔后续参数。例如：

   注意将

   VIDEO_ID

   替换成你实际的视频ID。

YouTube嵌入代码中的

allow

属性是什么意思？

allow

属性用于控制iframe中运行的视频可以使用的浏览器特性。例如，

accelerometer

允许视频访问设备的加速度计，

autoplay

允许自动播放，

clipboard-write

允许视频写入剪贴板，等等。

allowfullscreen

是最常见的，它允许用户全屏观看视频。 没有它，全屏按钮可能不起作用。

如何让嵌入的YouTube视频响应式？

让嵌入的YouTube视频响应式，意味着它会根据屏幕大小自动调整尺寸，避免在小屏幕上溢出。一个常用的方法是使用CSS来实现。

1. 包裹

   <iframe>

   标签： 用一个

   <div>

   标签包裹

   <iframe>

   标签。

2. CSS样式： 添加以下CSS样式：

   .video-container {   position: relative;   padding-bottom: 56.25%; /* 16:9 aspect ratio */   height: 0;   overflow: hidden; }  .video-container iframe {   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%; }

3. HTML代码：

   <div class="video-container">   <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>

   这种方法的原理是利用

   padding-bottom

   属性来维持视频的宽高比，然后让

   <iframe>

   标签占据容器的全部空间。

   56.25%

   是16:9宽高比的高度百分比。 如果你的视频是4:3的，那么这个值应该是

   75%

   。

如何在嵌入的YouTube视频上添加自定义控件？

虽然YouTube本身提供了播放器控件，但有时你可能想要添加自己的控件，例如自定义的播放/暂停按钮、音量滑块等。这需要使用YouTube IFrame Player API。

1. 引入YouTube IFrame Player API： 在你的HTML文件中引入API脚本。

   <script src="https://www.youtube.com/iframe_api"></script>

2. 创建

   <iframe>

   标签： 创建一个

   <iframe>

   标签，并设置

   id

   属性。

   <div id="player"></div>

3. 编写JavaScript代码： 编写JavaScript代码来初始化播放器，并添加自定义控件。

   var player; function onYouTubeIframeAPIReady() {   player = new YT.Player('player', {     height: '360',     width: '640',     videoId: 'VIDEO_ID',     events: {       'onReady': onPlayerReady,       'onStateChange': onPlayerStateChange     }   }); }  function onPlayerReady(event) {   // 播放器准备就绪后的操作，例如绑定自定义控件   document.getElementById('play-button').addEventListener('click', function() {     player.playVideo();   });    document.getElementById('pause-button').addEventListener('click', function() {     player.pauseVideo();   }); }  function onPlayerStateChange(event) {   // 播放器状态改变时的操作   if (event.data == YT.PlayerState.PLAYING) {     console.log('视频正在播放');   } }

4. 添加自定义控件： 在HTML中添加自定义控件。

   <button id="play-button">播放</button> <button id="pause-button">暂停</button>

   这种方法的关键在于使用YouTube IFrame Player API来控制播放器，并监听播放器的事件，以便在播放器状态改变时执行相应的操作。 记得替换

   VIDEO_ID

   为你的视频ID。