站長資訊網
youtube html5播放失敗的解決辦法：1、打開youtube，找到視頻，在視頻右下角點擊分享；2、選擇嵌入；3、去除iframe標簽里面的width和height；4、為iframe添加一個父元素，設置一個讓視頻填滿屏幕的百分比即可。
本教程操作環境：Windows10系統、HTML5版、DELL G3電腦
youtube html5播放失敗怎么辦？
HTML插入Youtube視頻
網頁需要插入youtube視頻,直接用標簽<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標簽內容，但是這樣的代碼直接放到頁面文件里面，不能很好地調試和自適應。
因為寬度和高度都是固定的，無法調整。
解決：
去除iframe標簽里面的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標簽設為絕對定位，寬度高度都設100%，父元素相對定位，通過padding-bottom:%，設置一個讓視頻填滿屏幕的百分比(可自行調試)
.youtube{padding-bottom: 57%;position: relative;}.elementor-video-iframe{max-width: 100%;width: 100%;border: none;position: absolute;height: 100%;}
登錄后復制
這樣就能得到一個自適應的視頻了，css樣式也可以自己添加。
推薦學習：《HTML視頻教程》
