YouTube埋め込み
☆1画像のみ
埋め込みたいYouTube画面 右上の共有ボタンをクリックします
表示されるコードをコピーします
先ほどコピーしたコードを<iframe>などのsrcにペーストします
<![CDATA[ <iframe width="420" height="315" src="https://www.youtube.com/embed/uyeF2VdZUaE" frameborder="0" allowfullscreen></iframe>
]]>
☆複数画像（jQuery利用）
<head>にcssファイルとjQuery本体とjsファイルを組み込みます。
<![CDATA[ <link href="jquery.youtubeGallery.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.youtubeGallery.js"></script>
]]>
YouTubeを組み込むための<script>を書き込みましょう。
<![CDATA[<script>
jQuery(function( $ ) {
// #youtubeに動画を埋め込む例
$('#youtube').youtubeGallery( {
width: '480', // 動画の横幅（半角数字）
height: '320', // 動画の高さ（半角数字）
speed: '1000', // フェードのスピード（半角数字）
urls:[
'YouTubeの動画のURL',
'YouTubeの動画のURL',
'YouTubeの動画のURL',
'YouTubeの動画のURL',
'YouTubeの動画のURL'
] // YouTubeの動画のURLのリスト
} );
} );
</script>
]]>
※Youtube動画のURLは埋め込みコード同様に共有に書かれていますので、それをコピーしてきます。
<body>内の表示したい箇所へ以下のタグを書き込みます。
<div id="youtube"></div>
今回使用したjQueryプラグインはyoutubeGalleryを使用しました。
DownloadFile:jquery.youtubeGallery.js,jquery.youtubeGallery.css