YouTubeの埋め込み

ドキュメント

タイトル: 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

Parameters	Type	Default	Description
autoplay	0 or 1	0	Auto play on / off
cc_load_policy	0 or 1	User Setting	Caption show on / off
color	red or white	red	Video progress bar's color
controls	0 or 1	1	Video player controls show on / off
disablekb	0 or 1	0	Keyboard controls on / off
enablejsapi	0 or 1	0	JavaScript Player API calls on / off
end	positive integer	-	Timing setting to stop video play
fs	0 or 1	1	Fullscreen button display on / off
hl	ISO 639-1 two-letter language code or a fully specified locale	User Setting	Set interface language
iv_load_policy	1 or 3	1	Video annotations show on / off
list	'search query' or 'CHANNEL_ID' or 'PLAYLIST_ID'	-	Specify load content according to listType
listType	search or user_uploads or playlist	-	Set the type of content to load (use with list)
loop	0 or 1	0	Loop play on / off
modestbranding	0 or 1	0	YouTube logo show on / off
origin	0 or 1	0	Extra security measure for the IFrame API on / off (only IFrame API)
playlist	comma-separated list of 'VIDEO_ID'	-	Multiple 'VIDEO_ID' to play as playlists
playsinline	0 or 1	0	Controls whether videos play inline or fullscreen in an HTML5 player on iOS
rel	0 or 1	1	Related videos show on / off
showinfo	0 or 1	1	Video information show on / off
start	positive 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検索
このページでは、コードをまとめて検索することができます。

ドキュメント

YouTube Iframe Player API

ソースコード

コメント

検索