2014
11
03

Awesome Video Background Plugin with HTML5 and Youtube API - YTPlayer

關鍵字:YTPlayer

部份網站在製作網頁的過程中,會在背景中放置一張圖片讓網頁看起來豐富,
現在我們就可以利用HTML5+JQuery將Youtube視頻以全螢幕方式呈現在網頁背景上。

實際在運作時,可依以下方法,在您的網頁中進行修改:
1. 於<head></head>區間加入script的內容

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="inc/jquery.mb.YTPlayer.js"></script>

2. JS call

<script>
jQuery(function(){
jQuery(".player").mb_YTPlayer();
});
</script>

3. 初始化YTPlayer背景

<a id="bgndVideo" class="player" data-property="{videoURL:'http://youtu.be/BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}">My video</a>
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所