<!-- [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">
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>
ここではテキストにスタイルシートで様々な効果を付したデザインサンプルを掲載しています。
見出しは、その下の記事の性質を示すテキストです。
ここでは、スタイルシートを使用した見出しのデザインサンプルが掲載しています。
HTML <ol> 要素は順序付けられた項目リストを表します。
ここでは、スタイルシートを使用するolのデザインサンプルを掲載しています。
HTML <hr>要素は、段落レベルの要素間のテーマ区切りを表します。
ここでは、スタイルシートを使用してhrのデザインサンプルを掲載しています。
CSSプロパティbox-shadowは、要素のフレーム枠の周囲にシャドーエフェクトを追加するために使用されます。
ここでは、スタイルシートを使用したボックスシャドウプロパティのデザインサンプルを掲載しています。
このサンプルではIE用にPicturefillを追加しています。
Bootstrapフレームワークの標準的なボタンデザインです。
Hover.cssはマウスオーバー効果のスタイルシートコレクションです。
Button.cssは、CSS3のボタンアニメーションのコレクションです。
これはBootstrapフレームワークの標準的なカードデザインのまとめです。
Arctext.jsは文字列を指定した円半径に沿ってカーブさせるjQueryプラグインです。
Lettering.jsは、1文字、1単語、1列の指定された文字列を<span>タグで囲むjQueryプラグインです。
Textillate.jsは、イン/アウトアニメーションエフェクトをテキストに追加するjQueryプラグインです。
FitText.jsは、親要素の幅に応じてフォントサイズをフィットさせるjQueryプラグインです。
FeedEkは、RSSフィードとAtomフィードを解析して表示するjQueryプラグインです。
YouTubeのさまざまな埋め込み方法の紹介。
FitVidsはiframeで埋め込まれたYouTube動画をレスポンシブ対応に変換するjQueryプラグインです。
xZoomは画像のズームプレビューを表示するjQueryプラグインです。
プレビュー位置とズームをカスタマイズすることができます。
Instagram.cssは、インスタントグラムのような写真をフィルタリングするスタイルシートです。
Moment.jsは日付と時刻を処理して表示するjavascriptです。
このサンプルでは日本語にローカライズしています。
Bootstrap Material DatePickerはMoment.jsを使用したjQueryデータピッカープラグインです。
MultifilterはjQueryテーブルフィルタリングプラグインです。
"display: flex;"を使用したレスポンステーブル
rowspanはサポートされていません。
"display: grid;"を使用したレスポンステーブル
rowspanはサポートされていません。
Bootstrapフレームワークの標準的なテーブルデザインです。
jQuery Mask Pluginは、フォームフィールドでマスク(検証)を行うjQueryプラグインです。
Select2は、セレクトフォームをより高度にするjqueryプラグインです。
Select2の基本的な使い方は次のとおりです。
jQuery Searcherは、さまざまなマークアップをサポートするjQuery検索/フィルタリングプラグインです。
Bootstrapフレームワークの標準的なカルーセルです。
FlexSliderはレスポンシブjQueryスライダープラグインです。
ここにはFlexsliderの基本的な単一スライダー設定を掲載しています。
FlexSliderはレスポンシブjQueryスライダープラグインです。
ここにはFlexsliderの基本的なカルーセルスライダー設定を掲載しています。
fancyBoxはjQueryライトボックスプラグインです。
ここではfancyBoxの基本的なイメージライトボックスの設定を行います。
fancyBoxはjQueryライトボックスプラグインです。
ここでは、YouTube、Vimeo、Instagram、Googleマップ、fancyBoxのインラインHTML、iframeライトボックスの設定を掲載しています。
animsitionはページ遷移時にアニメーションエフェクトを追加するjQueryプラグインです。
GreedyNavは画面縮小時にはみ出した項目をドロップダウンに切り替えるjQueryを用いたレスポンシブナビゲーションメニューです。
GridTabはグリッドベースのレスポンシブタブを作成する軽量なjQueryプラグインです。
jQuery.NiceScrollはスクロールの表示と機能を拡張するjQueryプラグインです。
metisMenuは水平・垂直メニューを展開するjQueryプラグインです。
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここでは、基本的なfullPage.jsのフルスクリーンスクロールを掲載しています。
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここではナビゲーションメニューを表示しています。
Offside.jsはオフキャンバス展開するJavaScriptキットです。
これは、左側オフキャンバスが展開するサンプルです。
Offside.jsはオフキャンバス展開するJavaScriptキットです。
これは、複数のオフキャンバスが展開するサンプルです。
Filterizrはコンテナ内のアイテムをフィルタリング、並べ替え、シャッフル、検索をするjQueryプラグインです。
これはオプションを使用しない基本的なサンプルです。
Filterizrはコンテナ内のアイテムをフィルタリング、並べ替え、シャッフル、検索をするjQueryプラグインです。
これはFilterizrのより高度なフィルタリングのサンプルです。
animsitionはページ遷移時にアニメーションエフェクトを追加するjQueryプラグインです。
Textillate.jsは、イン/アウトアニメーションエフェクトをテキストに追加するjQueryプラグインです。
Scrollaはスクロール時に表示するアイテムにアニメーション効果を付加するjQueryプラグインです。
Hover.cssはマウスオーバー効果のスタイルシートコレクションです。
Animate.cssはアニメーション効果のスタイルシートコレクションです。
jQuery Easing Plugin はjQueryのイージング(アニメーション効果)を拡張するプラグインです。
ここでは要素へのイージングのサンプルを掲載しています。
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここでは、基本的なfullPage.jsのフルスクリーンスクロールを掲載しています。
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここではナビゲーションメニューを表示しています。
jQuery.mb.YTPlayerは背景にYouTube動画を表示するjQueryプラグインです。
Hint.cssはツールチップ用のスタイルシートです。
クラス名を追加するだけでツールチップを表示することが出来ます。
Protipはツールチップを生成するjQueryプラグインです。
ツールヒントの位置、大きさなどは、データ属性のみで設定します。
Bootstrapフレームワークの標準的なカルーセルです。
これはBootstrapフレームワークの標準的なカードデザインのまとめです。
Bootstrapフレームワークの標準的なボタンデザインです。
Bootstrapフレームワークの標準的なテーブルデザインです。
GreenSockによるTweenMAX、TweenLite、TimelineLite、TimelineMaxのチートシート
このページでは、コードをまとめて検索することができます。