baserJSでYouTubeを埋め込む

  • 3
    Like
  • 0
    Comment
More than 1 year has passed since last update.

コーポレートサイトにちょうどいい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動画を背景にする方法 を解説します。