跳至主要內容

Techmarks劃重點

  • 教學分享
    • Android
    • iOS
    • Mac
    • Windows
    • Photoshop
    • 網路賺錢
  • 社群軟體
    • Facebook
    • Instagram
    • YouTube
    • LINE
    • Google
  • 網路與軟體分享
    • 線上工具
    • App
    • 擴充外掛
    • 免費網路空間
    • Game遊戲
  • 網站架設
    • WordPress
    • WooCommerce購物車
  • SEO優化工具

【筆記】YouTube嵌入到網站後自動播放、靜音、循環播放&隱藏推薦影片等設定教學。

YouTube嵌入相關設定1
將YouTube嵌入到網站中,除了使用iframe語法之外,能利用以下程式碼,實現載入頁面後自動YouTube播放影片、預設聲音為靜音、關閉片尾推薦影片、隱藏影片標題、自動循環播放與隱藏YouTube Logo等功能,讓視頻放到網頁中可以有更理想的呈現方式。(※你也可以用:YouTube嵌入語法產生器)



YouTube嵌入到網站中自動播放、靜音 教學
範例影片

在開啟網頁時自動播放嵌入的YouTube影片,且預設聲音為靜音。


程式碼

請複製以下程式碼,依照需求自行變更播放器參數。

*如果要取消靜音,請把.mute拿掉。
*要關閉片尾或播放時的推薦影片請加入rel: 0,
*其他數值要變更調整數字0改為1。可參考官方YouTube播放器参数。

<div id="muteYouTubeVideoPlayer"></div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('muteYouTubeVideoPlayer', {
videoId: '2ymhllPMCrg', // YouTube 影片 ID
width: 650, // 播放器寬度 (in px)
height: 356, // 播放器長度 (in px)
playerVars: {
autoplay: 1, // 自動播放視頻
controls: 1, // 顯示播放/暫停按鈕
showinfo: 0, // 隱藏影片標題
modestbranding: 1, // 隱藏YouTube LOGO
loop: 1, // 循環播放
fs: 0, // 隱藏全螢幕視窗按鈕
cc_load_policty: 0, // 隱藏關閉字幕
iv_load_policy: 3, // 隱藏影片註釋
autohide: 0 // 播放時隱藏影片控制按鈕
},
events: {
onReady: function(e) {
e.target.mute(); // 靜音
}
}
});
}
// Written by @labnol
</script>

原文網址:How to Embed a YouTube Video with Sound Muted


延伸閱讀:YouTube教學、YouTube嵌入語法產生器

相關文章:

  1. 把影片嵌入網站的iframe語法產生器,可設定自動播放、開始與結束時間。
  2. 線上YouTube轉MP3工具!電腦、手機打開網頁就能一鍵快速下載音樂。
  3. 怎麼在網站加入自己的「YouTube頻道訂閱按鈕」?簡單產生嵌入碼教學。
  4. 『教學』怎樣移除WordPress繼續閱讀的#more標籤?
  5. PHP提交表單時不用刷新頁面!簡單幾個步驟,送出資料就免重新整理網頁。
  6. YouTube Video Cutter線上剪YouTube片段的免費工具,影片可下載MP3/MP4/GIF格式。
  7. YouTube「資訊卡」在影片播放時,顯示宣傳頻道、意見調查與網站連結的互動頁籤(教學)。
  8. 如何下載YouTube影片的縮圖?找出背景圖片網址,小尺寸或高解析度下載。
標籤 YouTube、YouTube 嵌入 隱藏推薦影片、YouTube 嵌入關閉推薦影片、YouTube 教學、YouTube嵌入 播放器參數、YouTube嵌入 播放器設定、YouTube嵌入 自動播放、YouTube嵌入 設定、YouTube嵌入 隱藏logo、YouTube嵌入 靜音、YouTube嵌入到網站後自動播放
文章導覽
Facebook回覆機器人-AutoChat自動回覆留言訊息,並傳送私訊給用戶,協助管理粉絲專頁。
Inbox by Gmail自動分類郵件、設定提醒、延後顯示信件,強化Gmail功能。
  • 3個繁體簡體轉換的線上工具,快速繁體中文互轉簡體中文,字幕檔/TXT也可整篇轉換。
  • 怎麼用全家店到店寄貨?運費、尺寸、寄件流程、包裹配送查詢、限制,全家店到店 線上操作教學!
  • Storyset 免費線上製作動畫插圖工具,可下載成SVG、PNG或GIF、MP4。
  • 小米PPT,強大PPT搜尋引擎-免費下載PPT模板、各種範本、動畫圖表。
  • 2022 推薦6個 免費 PPT範本 下載網站!上萬款PowerPoint模板、各種風格樣式、背景包。
Techmarks劃重點 © 2022