跳至主要內容

Techmarks劃重點

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

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

發佈於 2017-12-192019-03-19 techmarks

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嵌入語法產生器

YouTubeYouTube 嵌入 隱藏推薦影片YouTube 嵌入關閉推薦影片YouTube 教學YouTube嵌入 播放器參數YouTube嵌入 播放器設定YouTube嵌入 自動播放YouTube嵌入 設定YouTube嵌入 隱藏logoYouTube嵌入 靜音YouTube嵌入到網站後自動播放

文章導覽

⟵Facebook回覆機器人-AutoChat自動回覆留言訊息,並傳送私訊給用戶,協助管理粉絲專頁。
Inbox by Gmail自動分類郵件、設定提醒、延後顯示信件,強化Gmail功能。⟶

搜尋

相關文章

分類

  • Android
  • App
  • Facebook
  • Game遊戲
  • Google
  • Homebridge
  • HomeKit
  • Html
  • Instagram
  • iOS
  • iPhone
  • Linux
  • Mac
  • Mac
  • Microsoft office
  • NAS
  • Photoshop
  • PHP
  • Python
  • Raspberry Pi
  • SEO優化工具
  • Smart Home
  • Windows
  • Windows
  • WooCommerce購物車
  • WordPress
  • YouTube
  • 信用卡
  • 優惠券
  • 免費素材
  • 免費網路空間
  • 擴充外掛
  • 教學分享
  • 生活資訊
  • 社群軟體
  • 網站架設
  • 網路與軟體分享
  • 網路賺錢
  • 線上工具
Techmarks劃重點 Copyright © 2021.