LoginSignup
3

More than 5 years have passed since last update.

baserJSでYouTubeを埋め込む

Posted at

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3