自媒體育館
  • 推薦器材
  • 打造工作室
  • 新手入門
  • 小秘訣工具箱
  • 內容變現
小秘訣工具箱

【WordPress 外掛】Embed Plus for YouTube | 讓網頁中的影片自動配合裝置縮放大小

by BEA 10 4 月, 2020
2.1K

2020年,為什麼還要在部落格上寫文章?

使用部落格或網站發布文章,相較於傳統的紙本雜誌或是書籍,有一個最獨特的優點,就是可以在文章上呈現多樣的媒體;從最基本的文字、照片,到音頻、影片,甚至是與觀眾互動的遊戲設計,把傳統的視覺的體驗,提升到聽覺甚至是未來感覺(虛擬實境,virtual reality, VR)的層次。

上面提到的這些,只有網站或是部落格上面呈現的文章優勢,可以從紐約時報(The New York Times)在2012年12月20日,在她們網站上發布的一篇雪崩報導,充分表現出來。

Snow Fall: The Avalanche at Tunnel Creek by John Branch

在雪崩這則報導中使用了多種媒體形式,包含

  • 採訪文字
  • 登山路線與雪崩動畫模擬
  • 受訪者與現場圖片集(幻燈片集)
  • 雪崩實地的影片(伴隨著吹過積雪山頂呼嘯的風聲)
  • 人物專訪影片
  • 實際報案的911電話錄音
  • 動態的衛星雲圖

這些不同的媒體強烈增加了報導中內容的具體程度和讀者的投入度,記者 John Branch 也憑藉這部作品,獲得了2013年普利茲新聞特稿獎 (Pulitzer Prize in Feature Writing)。

這個作品的確是新媒體的典範,但這個程度離我們自己架設網站的新手實在太遙遠了,今天要分享的是

嵌入文章中的YouTube影片,要如何隨著讀者觀看裝置的不同,自動放大或縮小?

使用wordpress自架站,在文章中嵌入YouTube影片非常方便,可以把影片的網址直接貼到文章內即可完成,但這種方式有一個問題,就是影片的大小是固定的,有些設定在桌上型電腦上觀看可能剛好,在手機或是平板上觀看時,影片就會大到超出螢幕。這時候我們需要的是一個響應式,或稱為自適應式的影片尺寸設計(Responsive video sizing design),讓影片可以自動配合裝置改變大小。

Q: 對於使用Wordpress架站的新手,有沒有一個外掛可以符合這些需求?

A: 有,而且還是免費的。 

Embed Plus for YouTube – Gallery, Channel, Playlist, Live Stream

(按此可連至官方網頁下載)

Embeb Plus for YouTube 的主要功能有哪些?

  • 文章中的YouTube影片可以隨著讀者/觀眾使用不同的載體,自動縮小或放大(例如桌上型電腦、平板或手機)
  • 在內嵌的YouTube影片播放完之後,不要出現推薦的其他影片(免得觀眾被其他的影片吸引走)
  • 可支援YouTube頻道/播放列表/直播等功能

Embed Plus for YouTube 安裝與使用方法

1. 登入WordPress的後台後,選取左側欄位裡的【外掛】(圖片步驟 ①)之後,在外掛的選項下方選取【安裝外掛】(圖片步驟 ②)

2. 在右邊主畫面的搜尋關鍵字中打入 【Embed Plus for YouTube】(圖片步驟 ③),按下【立即安裝】(圖片步驟 ④)

3. 左側欄位會新增一個【YouTube Free】的選項,按下後進入設定畫面(圖片步驟 ⑤)

4. 如果想要網站內嵌入的YouTube影片播放完之後,不要顯示其他的推薦影片,可以【Related Video】這個選項底下選擇(圖片步驟 ⑥ )

下方有三個選項

⦿ 第一個是完全不顯示

⦿ 第二個是只顯示這個YouTube頻道的推薦影片

⦿ 第三個是顯示所有的YouTube的推薦影片

設定完成之後,可以打開網站,就會發現無論怎麼改變視窗大小,裡面的YouTube影片會自動縮放,用手機或是平板看都會自動改變大小了。對於來訪的觀眾或是讀者提供更好的觀賞體驗。

5. 在預設的設定選項中,如果你想要嵌入的YouTube影片能隨著不同的裝置自動縮放,把【Resposive Video Sizing】(圖片步驟 ⑦) 這個選項打勾。

下方有兩個選項,一個是套用到網站內所有的YouTube影片,另一個是只套用到用這個外掛嵌入的影片;如果選擇第一個,則網站內全部的影片就會完成設定,不用一個一個去修改。

6. 最後按下確定儲存設定之後,用不同的裝置開啟網頁進行測試,看看是不是在電腦、平板或者是手機上出現的影片,都能自動縮放。

如果測試沒問題的話,以後在網站中文章或是頁面內嵌的YouTube影片,就會套用這個自動縮放的設定了。

0 FacebookLINE
Avatar photo
BEA

上一篇
當電玩遇上古典樂–貝多芬第五號(命運)交響曲《Line Rider》
下一篇
現代舞與音樂的完美結合–國內外歌手現代舞MV大集合

你可能有興趣的文章

無處藏身的麥克風?別擔心!七個隱藏領夾式麥克風的小技巧

解密YouTube演算法: YouTube總監分享5個新手小頻道爆紅之道

不再為拍直式或橫式影片而煩惱! 水平拍攝的4個優點,兼顧內容與平台的最佳...

28個 YouTube Shorts 熱門密技,讓你的短片脫穎而出

【ChatGPT自動寫稿】六條規則教你正確使用AI,輕鬆完成精彩YouT...

影音內容創作者必學的五個備份技巧,讓你的照片、影片檔案永保安康

讓字幕替你的影片大加分 | 增加影片曝光與觀看時間的秘密武器

【自媒體音質改善】搞懂 YouTube 對於上傳影片的2條聲音規定,帶給...

【創作者的修練】寫作練習讓思路更清晰 | Tim Ferris

2022年邁向YouTube成功創作者的九堂課 | Jeven Dove...

關於我們

關於我們

我們是一群在不同自媒體領域求生的創作者,在這裡分享一路上跌跌撞撞學習到的知識。網站內容包含介紹各類自媒體創作者需要的器材工具、國際間最新的軟硬體資訊、提高創作效率的小秘訣,以及如何從零開始打造自己的影音工作室。

  • 隱私權政策
  • 網站使用條款
  • 聯繫我們

@2023 - 自媒體育館 All Right Reserved.

自媒體育館
  • 推薦器材
  • 打造工作室
  • 新手入門
  • 小秘訣工具箱
  • 內容變現