跳至主要內容

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. 【2023推薦】線上YouTube轉MP3!免費、高音質,電腦&手機都可用,一鍵下載音樂和影片。
  3. 怎麼在網站加入自己的「YouTube頻道訂閱按鈕」?簡單產生嵌入碼教學。
  4. 『教學』怎樣移除WordPress繼續閱讀的#more標籤?
  5. PHP提交表單時不用刷新頁面!簡單幾個步驟,送出資料就免重新整理網頁。
  6. Disable right click網站禁止點擊右鍵的程式碼產生器,javascript封鎖右鍵。
  7. YouTube Video Cutter線上剪YouTube片段的免費工具,影片可下載MP3/MP4/GIF格式。
  8. YouTube「資訊卡」在影片播放時,顯示宣傳頻道、意見調查與網站連結的互動頁籤(教學)。
分類 YouTube、社群軟體 標籤 YouTube、YouTube 嵌入 隱藏推薦影片、YouTube 嵌入關閉推薦影片、YouTube 教學、YouTube嵌入 播放器參數、YouTube嵌入 播放器設定、YouTube嵌入 自動播放、YouTube嵌入 設定、YouTube嵌入 隱藏logo、YouTube嵌入 靜音、YouTube嵌入到網站後自動播放
Facebook回覆機器人-AutoChat自動回覆留言訊息,並傳送私訊給用戶,協助管理粉絲專頁。
Inbox by Gmail自動分類郵件、設定提醒、延後顯示信件,強化Gmail功能。
  • Fesliyan Studios免費免版稅可商用的背景音樂下載,剪輯影片、Podcasts和YouTube皆可用。
  • DownThemAll 批次下載網站內的所有內容,快速大量下載圖片、文件檔、音訊、連結、影片等檔案。(Chrome/FireFox)
  • 線上Podcast轉MP3下載器-電腦和手機都可將Podcast單集下載成MP3。Podcasts Downloader
  • Google逐字稿教學!開網頁就能將影片轉文字、錄音檔轉文字、麥克風收音輸出文字,即時轉錄電腦版。
  • LINER影片標記工具,YouTube螢光筆!在時間軸添加戳記、文字備註,邊看影片邊做筆記。
Techmarks劃重點 © 2023