ドキュメント

タイトル
YouTubeの埋め込み
説明
YouTubeのさまざまな埋め込み方法の紹介。
カテゴリー
メディア
ライブラリー
YouTube
組み込みファイル
<!-- [8] YouTubeのサムネイルクリック再生で使用 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>    
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
添付表

YouTube Iframe Player API

ParametersTypeDefaultDescription
autoplay0 or 10Auto play on / off
cc_load_policy0 or 1User SettingCaption show on / off
colorred or whiteredVideo progress bar's color
controls0 or 11Video player controls show on / off
disablekb0 or 10Keyboard controls on / off
enablejsapi0 or 10JavaScript Player API calls on / off
endpositive integer-Timing setting to stop video play
fs0 or 11Fullscreen button display on / off
hlISO 639-1 two-letter language code or a fully specified localeUser SettingSet interface language
iv_load_policy1 or 31Video annotations show on / off
list'search query' or 'CHANNEL_ID' or 'PLAYLIST_ID'-Specify load content according to listType
listTypesearch or user_uploads or playlist-Set the type of content to load (use with list)
loop0 or 10Loop play on / off
modestbranding0 or 10YouTube logo show on / off
origin0 or 10Extra security measure for the IFrame API on / off (only IFrame API)
playlistcomma-separated list of 'VIDEO_ID'-Multiple 'VIDEO_ID' to play as playlists
playsinline0 or 10Controls whether videos play inline or fullscreen in an HTML5 player on iOS
rel0 or 11Related videos show on / off
showinfo0 or 11Video information show on / off
startpositive integer-Timing setting to start video play
関連

ソースコード

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- [8] YouTubeのサムネイルクリック再生で使用 -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>YouTubeの埋め込み</title>
    <style>
        /* [1] レスポンシブに対応したYouTube埋め込み */
        .youtube-16-9{
            position: relative;
            height: 0;
            padding-top: 25px;
            padding-bottom: 56.25%;
        }
        .youtube-16-9 iframe{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
        /* [2] レスポンシブに対応した縦長のYouTube埋め込み */
        .youtube-9-16{
            position: relative;
            width: 100%;
            height: 0;
            padding-top: 177.528%;
        }
        .youtube-9-16 iframe{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
        /* [8] Thumbnail Click & Play YouTube */
        .youtube-play{
            position: relative;
            background-size: cover;
        }
        .youtube-play .play{
            font-size: 96px;
            position: absolute;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            cursor: pointer;
            color: #f00;
        }
        .youtube-play .play:hover{
            color: #fff;
        }
    </style>
</head>
<body>
    <header>
        <h1 class="dlw-title">YouTubeの埋め込み</h1>
        <p class="dlw-description">YouTubeのさまざまな埋め込み方法の紹介。</p>
    </header>
    <section>
        <h2 class="dlw-subtitle">[1] レスポンシブに対応したYouTube埋め込み</h2>
        <div class="youtube-16-9">
            <iframe src="https://www.youtube.com/embed/HCBZ8I2yC1w" allowfullscreen></iframe>
        </div>
    </section>
    <section>        
        <h2 class="dlw-subtitle">[2] レスポンシブに対応した縦長のYouTube埋め込み</h2>
        <div class="youtube-9-16">
            <iframe src="https://www.youtube.com/embed/8BPTrwu8pn4" allowfullscreen></iframe>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[3] YouTube APIによる無限再生</h2>
        <div class="youtube-16-9">
            <iframe src="https://www.youtube.com/embed/HCBZ8I2yC1w?autoplay=1&cc_load_policy=0&controls=0&loop=1&modestbranding=1&mute=1&rel=0&showinfo=0" allowfullscreen></iframe>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[4] YouTubeプレイリスト埋め込み</h2>
        <div class="youtube-16-9">
            <iframe src="https://www.youtube.com/embed?listType=playlist&list=PLOGi5-fAu8bFBu6hFFeZ1qWJdJUXAOhZG" allowfullscreen></iframe>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[5] YouTube検索結果の埋め込み</h2>
        <div class="youtube-16-9">
            <iframe src="https://www.youtube.com/embed?listType=search&list=world+news" allowfullscreen></iframe>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[6] YouTubeユーザーチャンネル埋め込み</h2>
        <div class="youtube-16-9">
            <iframe src="https://www.youtube.com/embed?listType=user_uploads&list=NationalGeographic" allowfullscreen></iframe>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[7] YouTubeオリジナルプレイリストの埋め込み</h2>
        <div class="youtube-16-9">
            <iframe src="https://www.youtube.com/embed?playlist=PQWeWmKB_II,ZdJYKRg99Pw,9bQNRVyI4I0,zqE-ultsWt0" allowfullscreen></iframe>
        </div>
    </section>    
    <section>
        <h2 class="dlw-subtitle">[8] YouTubeのサムネイルクリック再生で使用</h2>
        <p>YouTubeのサムネイルを取得して表示し、それをクリックして動画を再生するようにjQueryで設定しています。</p>
        <script>
            $(function () {
                $(".youtube-play").each(function () {
                    // YouTubeのビデオIDからサムネイルを取得し、背景画像として設定します。
                    $(this).css('background-image', 'url(http://i.ytimg.com/vi/' + this.id + '/sddefault.jpg)');
                    // Add play button icon (Font Awesome)
                    $(this).append('<div class="play"><i class="fa fa-youtube-play"></i></div>');
                    // サムネイルをクリックすると、YouTubeが自動再生されます。
                    $(document).delegate('#' + this.id, 'click', function () {
                        var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
                        $(this).append('<iframe src="' + iframe_url + '" frameorder="0"></iframe>');
                    });
                });
            });
        </script>        
        <div class="youtube-16-9 youtube-play" id="HCBZ8I2yC1w"></div>
    </section>      
</body>
</html>

コメント

検索

スタイルデザイン
テキストスタイルデザインCSS

ここではテキストにスタイルシートで様々な効果を付したデザインサンプルを掲載しています。

見出しスタイルデザインCSS

見出しは、その下の記事の性質を示すテキストです。
ここでは、スタイルシートを使用した見出しのデザインサンプルが掲載しています。

順番リストデザインスタイルCSS

HTML <ol> 要素は順序付けられた項目リストを表します。
ここでは、スタイルシートを使用するolのデザインサンプルを掲載しています。

分割線スタイルデザインCSS

HTML <hr>要素は、段落レベルの要素間のテーマ区切りを表します。
ここでは、スタイルシートを使用してhrのデザインサンプルを掲載しています。

ボックスシャドウスタイルデザインCSS

CSSプロパティbox-shadowは、要素のフレーム枠の周囲にシャドーエフェクトを追加するために使用されます。
ここでは、スタイルシートを使用したボックスシャドウプロパティのデザインサンプルを掲載しています。

レイアウト
ブレークポイントを指定して画像を切り替える方法JS

<picture>srcsetを使用して、画面サイズに応じて画像を切り替える方法です。レティーナにも対応しています。
このサンプルではIE用にPicturefillを追加しています。

リンク & ボタン
BootstrapボタンCSS

Bootstrapフレームワークの標準的なボタンデザインです。

Hover.cssCSS

Hover.cssはマウスオーバー効果のスタイルシートコレクションです。

Button.cssCSS

Button.cssは、CSS3のボタンアニメーションのコレクションです。

カード
BootstrapカードCSS

これはBootstrapフレームワークの標準的なカードデザインのまとめです。

テキスト
Arctext.jsjQuery

Arctext.jsは文字列を指定した円半径に沿ってカーブさせるjQueryプラグインです。

Lettering.jsjQuery

Lettering.jsは、1文字、1単語、1列の指定された文字列を<span>タグで囲むjQueryプラグインです。

Textillate.jsjQuery

Textillate.jsは、イン/アウトアニメーションエフェクトをテキストに追加するjQueryプラグインです。

FitText.jsjQuery

FitText.jsは、親要素の幅に応じてフォントサイズをフィットさせるjQueryプラグインです。

メディア
FeedEkjQuery

FeedEkは、RSSフィードとAtomフィードを解析して表示するjQueryプラグインです。

YouTubeの埋め込み

YouTubeのさまざまな埋め込み方法の紹介。

FitVids.jsjQuery

FitVidsはiframeで埋め込まれたYouTube動画をレスポンシブ対応に変換するjQueryプラグインです。

xZoomjQuery

xZoomは画像のズームプレビューを表示するjQueryプラグインです。
プレビュー位置とズームをカスタマイズすることができます。

Instagram.cssCSS

Instagram.cssは、インスタントグラムのような写真をフィルタリングするスタイルシートです。

日付
Moment.jsJS

Moment.jsは日付と時刻を処理して表示するjavascriptです。
このサンプルでは日本語にローカライズしています。

Bootstrap Material DatePickerjQuery

Bootstrap Material DatePickerはMoment.jsを使用したjQueryデータピッカープラグインです。

テーブル
MultifilterjQuery

MultifilterはjQueryテーブルフィルタリングプラグインです。

FlexテーブルCSS

"display: flex;"を使用したレスポンステーブル
rowspanはサポートされていません。

GridテーブルCSS

"display: grid;"を使用したレスポンステーブル
rowspanはサポートされていません。

BootstrapテーブルCSS

Bootstrapフレームワークの標準的なテーブルデザインです。

フォーム
jQuery Mask PluginjQuery

jQuery Mask Pluginは、フォームフィールドでマスク(検証)を行うjQueryプラグインです。

Select2 #1. 基本的な設定jQuery

Select2は、セレクトフォームをより高度にするjqueryプラグインです。
Select2の基本的な使い方は次のとおりです。

jQuery SearcherjQuery

jQuery Searcherは、さまざまなマークアップをサポートするjQuery検索/フィルタリングプラグインです。

スライダー
BootstrapカルーセルjQuery

Bootstrapフレームワークの標準的なカルーセルです。

FlexSlider #1. シングルスライダーjQuery

FlexSliderはレスポンシブjQueryスライダープラグインです。
ここにはFlexsliderの基本的な単一スライダー設定を掲載しています。

FlexSlider #2. カルーセルスライダーjQuery

FlexSliderはレスポンシブjQueryスライダープラグインです。
ここにはFlexsliderの基本的なカルーセルスライダー設定を掲載しています。

ライトボックス
fancyBox #1. 基本的なイメージライトボックスjQuery

fancyBoxはjQueryライトボックスプラグインです。
ここではfancyBoxの基本的なイメージライトボックスの設定を行います。

fancyBox #2. メディアライトボックスjQuery

fancyBoxはjQueryライトボックスプラグインです。
ここでは、YouTube、Vimeo、Instagram、Googleマップ、fancyBoxのインラインHTML、iframeライトボックスの設定を掲載しています。

ナビゲーション
animsitionjQuery

animsitionはページ遷移時にアニメーションエフェクトを追加するjQueryプラグインです。

GreedyNavjQuery

GreedyNavは画面縮小時にはみ出した項目をドロップダウンに切り替えるjQueryを用いたレスポンシブナビゲーションメニューです。

GridTabjQuery

GridTabはグリッドベースのレスポンシブタブを作成する軽量なjQueryプラグインです。

jQuery.NiceScrolljQuery

jQuery.NiceScrollはスクロールの表示と機能を拡張するjQueryプラグインです。

metisMenujQuery

metisMenuは水平・垂直メニューを展開するjQueryプラグインです。

fullPage.js #1. 基本的なフルスクリーンスクロールjQuery

fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここでは、基本的なfullPage.jsのフルスクリーンスクロールを掲載しています。

fullPage.js #2. メニュー付のフルスクリーンスクロールjQuery

fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここではナビゲーションメニューを表示しています。

Offside.js #1. 基本的なオフキャンバスJS

Offside.jsはオフキャンバス展開するJavaScriptキットです。
これは、左側オフキャンバスが展開するサンプルです。

Offside.js #2. 複数のオフキャンバスJS

Offside.jsはオフキャンバス展開するJavaScriptキットです。
これは、複数のオフキャンバスが展開するサンプルです。

Filterizr #1. 基本的なフィルタリングjQuery

Filterizrはコンテナ内のアイテムをフィルタリング、並べ替え、シャッフル、検索をするjQueryプラグインです。
これはオプションを使用しない基本的なサンプルです。

Filterizr #2. 高度なフィルタリングjQuery

Filterizrはコンテナ内のアイテムをフィルタリング、並べ替え、シャッフル、検索をするjQueryプラグインです。
これはFilterizrのより高度なフィルタリングのサンプルです。

アニメーション
animsitionjQuery

animsitionはページ遷移時にアニメーションエフェクトを追加するjQueryプラグインです。

Textillate.jsjQuery

Textillate.jsは、イン/アウトアニメーションエフェクトをテキストに追加するjQueryプラグインです。

ScrollajQuery

Scrollaはスクロール時に表示するアイテムにアニメーション効果を付加するjQueryプラグインです。

Hover.cssCSS

Hover.cssはマウスオーバー効果のスタイルシートコレクションです。

Animate.cssCSS

Animate.cssはアニメーション効果のスタイルシートコレクションです。

jQuery Easing PluginjQuery

jQuery Easing Plugin はjQueryのイージング(アニメーション効果)を拡張するプラグインです。
ここでは要素へのイージングのサンプルを掲載しています。

背景
fullPage.js #1. 基本的なフルスクリーンスクロールjQuery

fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここでは、基本的なfullPage.jsのフルスクリーンスクロールを掲載しています。

fullPage.js #2. メニュー付のフルスクリーンスクロールjQuery

fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここではナビゲーションメニューを表示しています。

jquery.mb.YTPlayerjQuery

jQuery.mb.YTPlayerは背景にYouTube動画を表示するjQueryプラグインです。

モーダル & ツールチップ
Hint.cssCSS

Hint.cssはツールチップ用のスタイルシートです。
クラス名を追加するだけでツールチップを表示することが出来ます。

ProtipjQuery

Protipはツールチップを生成するjQueryプラグインです。
ツールヒントの位置、大きさなどは、データ属性のみで設定します。

ソーシャル
フレームワーク
BootstrapカルーセルjQuery

Bootstrapフレームワークの標準的なカルーセルです。

BootstrapカードCSS

これはBootstrapフレームワークの標準的なカードデザインのまとめです。

BootstrapボタンCSS

Bootstrapフレームワークの標準的なボタンデザインです。

BootstrapテーブルCSS

Bootstrapフレームワークの標準的なテーブルデザインです。

チートシート
GreenSockチートシート

GreenSockによるTweenMAX、TweenLite、TimelineLite、TimelineMaxのチートシート

その他
Google検索

このページでは、コードをまとめて検索することができます。