部落格文章嵌入 YouTube 影片

作者:Jazz Wai
日期:01/2021
文章分類: Blog Marketing

展開或縮小文章目錄

從來沒有人說部落格文章只能以圖文的形式呈現內容,其實我們也可以嵌入 YouTube 影片在 Blogger 文章裡面,如此呈現內容的方式將會變得更多元化

繼上次製作 Blogger header logo 的教學,這次的教學內容我將會分享 2 種呈現YouTube 影片的方式,而我自己比較喜歡使用方法 B

影片解說

使用以下按鈕訂閱我們的 YouTube 頻道

方法 A:首先我們要獲得 YouTube 影片的嵌入代碼

步驟說明如下

  • 前往 Youtube
  • 找到你想嵌入的影片
  • 點擊 Share
  • 點擊 Embed
  • 複製那串代碼

粘貼嵌入代碼到部落格文章的位置

部落格文章嵌入 YouTube 影片

步驟說明如下

  • 進入你的部落格文章編輯
  • 在顯示影片的位置輸入『@@@@』作為記號
  • 點擊代碼編輯模式
  • 鍵盤鍵 CTRL + F 搜尋記號 @@@@
  • 找到記號『@@@@』並粘貼影片代碼代替
  • 點擊儲存 Save

查看方法 A 的效果

使用方法一的話,確實可以讓影片嵌入在可是你會發覺這樣的方式無法達到根據設備自動調整大小,查看圖片你會看到影片旁邊還有很多空間,所以我并沒有選擇用這樣的方式去嵌入 YouTube 影片的

方法 B:複製以下代碼到 Wordpad 備用

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, 
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="embed-container">
<iframe allowfullscreen="" frameborder="0"src="https://www.youtube.com/embed/YourVideoID"></iframe>
</div>

獲得 YouTube 影片ID,然後粘貼到 Wordpad 備用

  • 獲得 YouTube 影片 ID,只需要查看影片的網址就可以獲得了,上圖的的例子是 『WvcHo68L7BI』
  • 或者你可以在影片裡面點擊滑鼠右鍵,然後選擇 Copy Video URL
  • 之後就粘貼到你的 Wordpad 備用

影片 ID 替換【YourVideoID】

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, 
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="embed-container">
<iframe allowfullscreen="" frameborder="0"src="https://www.youtube.com/embed/WvcHo68L7BI"></iframe>
</div>

在加粗字體的文字【YourVideoID】使用影片 ID 來取代

粘貼代碼到文章嵌入 YouTube 影片

  • 進入你的部落格文章編輯
  • 在顯示影片的位置輸入『@@@@』作為記號
  • 點擊代碼編輯模式
  • 鍵盤鍵 CTRL + F 搜尋記號 @@@@
  • 找到記號『@@@@』並粘貼影片代碼代替
  • 點擊儲存 Save

(可以參考方法 A 的第二個步驟,操作是一樣的)

效果可以參考以下文章

部落格行銷教學#1 | 部落格行銷的 5 個好處

部落格行銷教學#2 | 5 個原因選擇 Blogger/Blogspot 寫博客

小結

有人常說圖文的部落格有點退潮流,看影片的人會更加多,現在你可以通過這樣的方式圖文+影片都有兼顧了,而且你是用最基本的 Blogger 就做到了。內容還是多元發展比較好

Jazz Wai

關於 Digital Marketing 我自己被坑的經驗很豐富,所以你不需要和我一樣冤枉地在繞路,這裡會持續分享對網絡營銷實際有用的內容。有部分進階的內容我只會和電郵訂閱的讀者分享,所以記得訂閱我的電子報


經常都覺得數位行銷術語是很容易讓人混淆的,也因為這些行業的黑話經常讓 Marketer 需要額外花時間和顧客或老闆解釋 例如 CPC、CTR、CVR、CPM、PPC、CPC、TOF、CDP、PPB 等等,不能説是很難的英文字母,但要理解起來就真的有難度(尤其是對數位行銷行業不熟悉的話),所以這次内容會整理和翻譯這些讓中新手摸不着頭腦的詞匯

Read More
數位行銷術語 | 行業黑話合集
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

中小企業

網銷資源手冊


免費下載網銷資源手冊

收錄網上講座、影片教學、文章教學、和資源下載鏈接

100% 保護隱私 |  拒絕濫發郵件