youtube html5播放失敗怎么辦

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

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

youtube html5播放失敗怎么辦？

HTML插入Youtube視頻

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

方法：

打開youtube，找到視頻，在視頻右下角點(diǎn)擊分享。

選擇嵌入，就會(huì)得到代碼如下：

<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)容，但是這樣的代碼直接放到頁(yè)面文件里面，不能很好地調(diào)試和自適應(yīng)。

因?yàn)閷挾群透叨榷际枪潭ǖ模瑹o(wú)法調(diào)整。

解決：

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

<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è)為絕對(duì)定位，寬度高度都設(shè)100%，父元素相對(duì)定位，通過(guò)padding-bottom:%，設(shè)置一個(gè)讓視頻填滿屏幕的百分比(可自行調(diào)試)

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

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

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