Written by Kasumi

iframeで埋め込みしたユーチューブをiframe外で停止させる方法。

こんにちは。カスミです。

さて、以下のようなお悩みをお持ちでしょうか?

ユーチューブをiframeで埋め込みしたけど、iframe外で再生中のユーチューブを停止させたい。

このような悩みを解決します。

コードペンデモ

See the Pen ユーチューブをiframe外で停止させる方法 by Kohei (@kouk05) on CodePen.dark

上記、実装したコードペンデモになります。

埋め込みしたテスト用のユーチューブを再生し、iframe下にある停止ボタンを押してみてください。

ユーチューブを停止できたかと思います。

詳しくは以下で解説致します。

※jqueryを使うので事前にjqueryのライブラリをhtmlに読み込んどきましょう。

ユーチューブのiframe内にパラメーターを付与

ユーチューブから埋め込み用のiframeをコピペしたら、iframe内のsrc末尾に以下パラメータを付与しましょう。

?enablejsapi=1

上記を付与する事によって、iframeをiframe外で制御できるようになります。

jqueryでiframeを制御し、再生中のユーチューブを停止させる

    $(function () {
      $("停止ボタンのクラス名").click(function () {
        videoControl("pauseVideo");
        function videoControl(action) {
          var $playerWindow = $("iframeのクラス名")[0].contentWindow;
          $playerWindow.postMessage(
            '{"event":"command","func":"' + action + '","args":""}',
            "*"
          );
        }
      });
    });

次にjqueryを使って、iframeを制御し、停止させる処理をscript内に記述します。

上記ソースをコピペでOKです。以下セレクタ内の文字列を任意で書き換えてください。

停止ボタンのクラス名:停止させるボタンのクラス
iframeのクラス名:埋め込みしたユーチューブのiframeのクラス

これで実装終了です。

まとめ

埋め込みしたユーチューブをポップアップで見せて、ポップアップを閉じる際に再生中のユーチューブを停止させる案件があったので、その際役立ちました。

以上で解説を終わります。

目次

関連記事

jQuery

【日本語対応】Datepickerを使って予約フォームにカレンダー式日付選択を入れる方法【jQuery】

更新日:2022.09.09
2922
jQuery

【jQuery】途中からヘッダー、ナビ、サイドバー等を追従させる方法【簡単】

更新日:2022.09.09
4883
jQuery

【jQuery】ページ内スクロールで一部だけスクロールさせたくない。除外方法を解説

更新日:2022.09.09
1708
jQuery

【簡単】jQueryプラグインのlightboxを使って、画像モーダルウィンドウを実装しよう。

更新日:2022.09.09
5553