実行結果
設置サンプルのソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>YouTube IFrame API：動画プレーヤ―の基本的な埋め込み</title>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="player"><!-- 動画プレーヤーの埋め込み --></div>
<script>
/* IFrame Player APIのコードを非同期にロード */
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
/* APIコードがダウンロードされた後で、ifraemとYouTubeプレーヤー要素を生成 */
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player(
'player', /* 動画プレーヤーを埋め込む要素ID */
{
width: '640', /* 動画プレーヤーの幅 */
height: '390', /* 動画プレーヤーの高さ */
videoId: '9YEEl52u8XE', /* YouTube動画ID */
events: { /* イベント */
"onReady": onPlayerReady /* プレーヤの準備完了時 */
}
}
);
}
function onPlayerReady(event){
/* プレーヤの準備完了時に自動再生 */
event.target.playVideo();
}
</script>
</body>
</html>