(HTML)- HTML 嵌入 YouTube 影片自動播放的方法

(HTML)- HTML 嵌入 YouTube 影片自動播放的方法

(HTML)- HTML 嵌入 YouTube 影片的方法

HTML 嵌入 YouTube 影片的方法。

 

很多人想知道 YouTube 影片能不能在一開始打開影片時就自動播放影片,所以本篇文章會來教學如何讓嵌入的影片自動播放影片及一些使用上的限制。

 

準備事項:

1. YouTube 內嵌網址:

https:// www.youtube.com/yourdata (URL)

2. 使用方法非常簡單:

在內嵌 < src > 網址內加入  ?autoplay=1&mute=1

 

Method 1:

<iframe src = ” https://www.youtube.com/yourdataURL?autoplay=1&mute=1 ” width = “300” height = “300” frameborder = “0” allowfullscreen></iframe>

 

Method 2:

<iframe width = “300” height = “300” src = “https://www.youtube.com/yourdataURL?autoplay=1&mute=1” title = “YouTube video player” frameborder = “0” allow = “accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

 

Method 3:( 實例1 )

<iframe style=”width:560px; height:315px;” src=”https://www.youtube.com/embed/XN031PuViqI?list=PL2SrkGHjnWcyWbA4MGSeTQVNiFHt1YbjC” frameborder=”0″ allowfullscreen></iframe>

 

Method 4:( 實例1 )

<iframe style=”width:800px; height:600px;” src=”./index.html” </iframe>

 

PS:由於 Google 在 2018 / 4 月加入了 YouTube 影片自動播放限制,必須要搭配靜音語法才能使自動播放生效。因為 iOS 及 Android 限制 YouTube 自動播放關係,所以用手機點開來是不會自動播放的,只有電腦版瀏覽器打開才會有效果。  

 

二、< iframe > 標籤的屬性 ( attributes )

<iframe>顯示的文字</iframe>

浮動視窗和一般的分割視窗不太一樣,在一般分割視窗中,必須有一文件來設定分割,但是浮動視窗是直接和網頁做結合,可以在視窗中任意擺放,< iframe > 標籤就是用來定義浮動視窗。目前只有 IE 支援 < iframe >,而 Netscape 並不支援。

 

src- 指定網頁路徑

用法: < iframe src=”網頁路徑” >

說明:src 屬性就是 iframe 所要連結網頁的路徑,和 frame 的 src 屬性是一樣的。

 

align- 視窗對齊方向

用法: < iframe align=”方向” >

說明:由於 iframe 可以在網頁上任意排版,所以就有 align 這屬性,讓浮動視窗可以和文字之間對齊。對齊方向有left、center和right,相信對這個屬性的設定應該不陌生了吧!

 

width、height- 視窗寬度和高度

用法: < iframe width=”寬度值” height=”高度值” >

說明:設定 iframe 的寬度和高度,以 pixel 或瀏覽器的百分比為單位。

 

frameborder- 視窗框線隱藏

用法: < iframe frameborder=”設定值” >

說明:設定 iframe 是否要有邊線,和 frame 的設定一樣,設定為 0,表示沒有框線,設定為 1,表示有框線。,若 iframe 內未設置此屬性,預設值為 1 (打開框線)

 

marginwidth、marginheight-視窗內容左右、上下邊距

用法: < iframe marginwidth = “寬度” marginheight = “高度” >

說明:設定連結的網頁距離四邊的空白大小,以 pixel 為單位。

 

name- 指定視窗名稱

用法: < iframe name=”窗格名稱” >

說明:設定 iframe 的視窗名稱,此功能和 frame 的 name 屬性功能是一樣的。

 

scrolling- 設定視窗捲軸

用法: < frame scrolling=”設定值” >

說明:scrolling 這個屬性就是用來設定窗格是否要顯示捲軸,設定值有 no、yes 和 auto 三種,當設定為 no 時,不管網頁是否超出了窗格,都不會出現捲軸;設定為 yes 時,捲軸永遠的出現;設定為 auto 時,當網頁長度或寬度大於窗格寬度或高度時,窗格就會自動的出現捲軸。預設值為 auto。

 

補充:

style – 可設定長寬度等 CSS 樣式(長寬度建議寫在 style 裡)

allowfullscreen – 表示允許全螢幕,若 iframe 內未設置此屬性,代表不能設置全螢幕

 

 

 

免責聲明:

1.本影像檔案皆從網上搜集轉載,不承擔任何技術及版權問題。

2.如有下載連結僅供寬頻測試研究用途,請下載後在24小時內刪除,請勿用於商業。

3.若侵犯了您的合法權益,請來信通知我們,我們會及時刪除,給您帶來的不便,深表歉意。



發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *