コーポレートサイトにちょうどいいJavaScriptライブラリ baserJS の解説記事です。
Webサイトと詳しいAPIリファレンスはこちら baserJS Webサイト
YouTubeを埋め込む
※クラス名・jQueryのセレクタは任意です。仮にyoutubeとします。
基本
基本的にこれだけ。data-idにYouTubeの動画IDを設定します。
<div class="youtube" data-id="FUgM105uN4c" data-width="1920" data-height="1080"></div>
$('.youtube').bcYoutube();
再生リストに対応する
（※ v0.0.16-alphaで実装中、v0.1.0ではきちんと実装予定）
HTML側でdata-idにYouTubeのIDをカンマ区切りで設定します。
<div class="youtube" data-id="FUgM105uN4c,KAuzzR56KvU" data-width="1920" data-height="1080"></div>
表示やコントールを変える
JS側でオプションで指定します。
$('.youtube').bcYoutube({
rel: false,
autoplay: true,
stopOnInactive: true,
controls: false,
loop: true,
showinfo: false
});
オプション
|プロパティ|型|初期値|説明|
|---|---|---|---|---|
|rel|boolean|false|関連動画を再生後に表示させるかどうか|
|autoplay|boolean|true|自動再生させるかどうか|
|stopOnInactive|boolean|false|ウィンドウがアクティブでなくなった時に再生を停止するかどうか|
|controls|boolean|false|コントロールを表示させるかどうか|
|loop|boolean|true|ループ再生するかどうか|
|showinfo|boolean|false|タイトル・動画情報を表示させるかどうか|
次回は YouTube動画を背景にする方法 を解説します。