IFrame Player APIの関数を利用する（DOM ノードへのアクセスと変更：destroy）

IFrame Player APIの関数を利用する（DOM ノードへのアクセスと変更：destroy）

以下のサンプルでは Iframeを削除するボタンをクリックした際、destroy を利用してIframeを削除します。
Iframeを再度作成するボタンをクリックすると、onYouTubeIframeAPIReady 再度実行することでIframeを再度作成します。
また、それぞれ実行する前に getIframe でIframeオブジェクトを取得して、Iframeの有無を確認しています。

サンプルコード

<div id="ytplayer"></div> <script> // API読み込み script = document.createElement( 'script' ); script.src = "//www.youtube.com/iframe_api"; firstScript = document.getElementsByTagName( 'script' )[ 0 ]; firstScript.parentNode.insertBefore( script , firstScript ); // 動画呼び出し function onYouTubeIframeAPIReady() { player = new YT.Player('ytplayer', { height: '285', width: '480', videoId: 'bHQqvYy5KYo' }); } function removePlayer() { var ifameObj = player.getIframe(); if(ifameObj) { player.destroy(); } } function remakePlayer() { var ifameObj = player.getIframe(); if(!ifameObj) { onYouTubeIframeAPIReady(); } } </script>

サンプル

---

Youtube API メモ Indexへ戻る