跳到主要內容

發表文章

目前顯示的是有「Youtube」標籤的文章

Youtube 嵌入影片相關參數

正常語法 「<iframe allowfullscreen="" frameborder="0" height="360" src="[YouTube Video URL]" width="640"></iframe>」 再把 [YouTube Video URL] 拆解一下 [https://www.youtube.com/embed/影片ID] 取得影片ID之後就可以多方利用了 在URL後面先加 [?rel=0] 之後再接想要的功能就可以了 Autoplay 自動播放 autoplay=1 「<iframe allowfullscreen="" frameborder="0" height="360" src="[YouTube Video URL]?rel=0&amp;autoplay=1" width="640"></iframe>」 Loop 重覆 loop=1&playlist=影片ID 「<iframe allowfullscreen="" frameborder="0" height="360" src="[YouTube Video URL]?rel=0&amp;loop=1&amp;playlist=影片ID" width="640"></iframe>」 Mute 靜音 volumn="0″ 「<iframe allowfullscreen="" frameborder="0" height="360" src="[YouTube Video URL]?rel=0&amp;loop=1&amp;playlist=影片ID" volumn="0" width=...

透過css設定,嵌入Youtube影片維持16:9比例

【HTML】 <div class="video-container">      <ifram ......................(拿掉寬&高的設定)</ifram> </div> 【CSS語法】 .video-container  { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;} .video-container iframe, .video-container object, .video-container embed  {position:absolute; top:0; left:0; width:100%; height:100%; } 【其他說明】 這裡指的是針對 Youtube 影片比例為 16:9 時的情況,若有其他比例需要再自行調整 padding-bottom 的數值