youtube html5播放失敗的解決辦法：1、打開youtube，找到視頻，在視頻右下角點擊分享；2、選擇嵌入；3、去除iframe標籤裡面的width和height；4、為iframe添加一個父元素，設定一個讓影片填滿螢幕的百分比即可。
本教學操作環境：Windows10系統、HTML5版、DELL G3電腦
youtube html5播放失敗怎麼辦？
HTML插入Youtube影片
網頁需要插入youtube影片,直接用標籤
方法：
#打開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影片教學》
以上是youtube html5播放失敗怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！
