youtube html5播放失敗的解決辦法：1、打開youtube，找到視頻，在視頻右下角點擊分享；2、選擇嵌入；3、去除iframe標(biāo)簽里面的width和height；4、為iframe添加一個父元素，設(shè)置一個讓視頻填滿屏幕的百分比即可。

本教程操作環(huán)境：Windows10系統(tǒng)、HTML5版、DELL G3電腦

youtube html5播放失敗怎么辦？

HTML插入Youtube視頻

網(wǎng)頁需要插入youtube視頻,直接用標(biāo)簽<video>是播放不出來的，我們知道<video>是只支持mp4，ogg這樣的視頻文件。

方法：

打開youtube，找到視頻，在視頻右下角點擊分享。

選擇嵌入，就會得到代碼如下：

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

這是一串iframe標(biāo)簽內(nèi)容，但是這樣的代碼直接放到頁面文件里面，不能很好地調(diào)試和自適應(yīng)。

因為寬度和高度都是固定的，無法調(diào)整。

解決：

去除iframe標(biāo)簽里面的width和height，這樣直接得到的視頻是壓縮的，所以要為iframe添加一個父元素

<div class="youtube">        <iframe width="100%" class="elementor-video-iframe" src="https://www.youtube.com/embed" 　　　　　　frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>       </iframe></div>

iframe標(biāo)簽設(shè)為絕對定位，寬度高度都設(shè)100%，父元素相對定位，通過padding-bottom:%，設(shè)置一個讓視頻填滿屏幕的百分比(可自行調(diào)試)

.youtube{padding-bottom: 57%;position: relative;}.elementor-video-iframe{max-width: 100%;width: 100%;border: none;position: absolute;height: 100%;}

這樣就能得到一個自適應(yīng)的視頻了，css樣式也可以自己添加。

推薦學(xué)習(xí)：《HTML視頻教程》