youtube html5播放失敗怎麼辦

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中文網其他相關文章！