Contents ...
udn網路城邦
小秘訣/如何在文章中嵌入youtube影片、影片自動播放以及只播放音樂無影像
2022/11/25 09:29
瀏覽1,039
迴響0
推薦8
引用0

大家好
youtube影片是不是不支援部落格了?怎麼把音樂影片放置到部落格呢?我能夠一進到文章內就讓音樂影片自動播放嗎?還有還有,我看到有人的部落格都沒有放置音樂影片,但是卻會播放音樂ㄟ!那是怎麼辦到的呢?
來來來,一個一個來!

(一)youtube影片支援部落格播放喔!怎麼把影片放置到部落格呢?

首先尋找您所想要嵌入的 YouTube 影片或播放清單頁面。例如以下畫面:
網址:https://www.youtube.com/watch?v=Jn09UdSb3aA

按一下「分享」圖示 分享。

接著會跳出以下畫面,按一下「分享」選項清單中的 「嵌入」。

按下嵌入後,則會出現以下畫面

接著複製紅色方塊中的 HTML 程式碼。

<iframe width="560" height="315" src="https://www.youtube.com/embed/Jn09UdSb3aA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

然後從youtube網站回到udn部落格中,將程式碼貼到部落格中的 HTML 編輯介面中,這樣就可以把影片放置到部落格內了。

怎麼叫出來HTML 編輯介面?請參閱以下截圖:

按下文章編輯功能表中的紅色框線的HTML就可以叫出HTML 編輯介面,然後把程式碼貼進去

要記得按下「更新」喔!這樣設定才會存檔生效喔!然後就可以看到影片出現在頁面裡了!

(二)怎麼自動播放影片呢?
前面知道語法怎麼來的,以及如何設定,後面的自動播放就只需要修改youtube所提供的程式碼就可以囉!
如果您希望影片能夠自動播放:
請在影片內嵌程式碼的影片 ID (「embed/」後的字串) 後方加上?&autoplay=1。
例子:

這段語法中 <iframe width="560" height="315" src="https://www.youtube.com/embed/Jn09UdSb3aA?&autoplay=1"title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

只要新增紅色那段語法,影片就可以自動播放囉!

(三)怎麼把影片隱形只播放音樂呢?
其實只要把影片的尺寸改到最小,影片就隱形啦!
所以我們就將這段語法 <iframe width="560" height="315" src="https://www.youtube.com/embed/Jn09UdSb3aA?&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p> 

紅色字的寬度560與高度315通通改成1,語法就會變成以下
<iframe width="1" height="1" src="https://www.youtube.com/embed/Jn09UdSb3aA?&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p> 

這樣影片就會隱形囉! 但是但是!千萬要記得設定自動播放,不然已經隱形了,要到哪裡找播放鍵呢!所以要隱形影片要記得設定自動播放喔!不然你找電小二問為什麼沒有播放?電小二也沒有辦法低~

最後,技術時時更新,語法隨時會變,我們也要跟著時代改變喔!

有誰推薦more

限會員,要發表迴響,請先登入