ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

【js】サイトに埋め込んだYouTubeの一時停止ボタンをiframe外で制御する方法

2017年11月30日
logo_youtube

コーディングをしていて、サイト内にiframeでYouTubeを埋め込むことがあるかと思いますが、通常だとYoutube(iframe内)をクリックすると再生、停止ができる仕様になっており、例えばオリジナルで停止ボタンを作成しても同期することができません。

そんな時に、jsで下記の記述をすることでYouTubeの一時停止機能をオリジナルで作成した停止ボタンにも適用することができます!

コーダーであればHTML内にYouTubeを埋め込むことは必ずあるかと思うので、覚えておくといざという時に役立つかと思います!

【デモ】YouTubeの一時停止ボタンをiframe外で制御するサンプル

https://hiroyayabiku.github.io/Youtube—stopBtn/

スポンサードサーチ

ソースをダウンロード

https://github.com/HiroyaYabiku/Youtube—stopBtn

html

1
2
3
4
<div class="youtubeWrap">
  <iframe class="video" id="popup-YouTube-player" width="560" height="315" src="https://www.youtube.com/embed/mh9IMIQmygE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
  <div class="youtube__closeBtn"><img src="./img/close.png" alt=""></div>
</div>

js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function(){
  var CloseTrigger = function(el){
      var $video = $('.video-stream');
      $(el).on('click', function() {
        console.log('success')
          videoControl("pauseVideo");
      });
      function videoControl(action){
          var $playerWindow = $('#popup-YouTube-player')[0].contentWindow;
          $playerWindow.postMessage('{"event":"command","func":"'+action+'","args":""}', '*');
      }
  };
  var closeBtnClick = new CloseTrigger('.youtube__closeBtn');
 
})();

ポイント!

通常の埋め込みソース

1
<iframe class="video" id="popup-YouTube-player" width="560" height="315" src="https://www.youtube.com/embed/mh9IMIQmygE" frameborder="0" allowfullscreen></iframe>

一時停止ボタンをiframe外で制御する場合のソース

1
<iframe class="video" id="popup-YouTube-player" width="560" height="315" src="https://www.youtube.com/embed/mh9IMIQmygE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

実装のポイントですが、urlの末尾に?enablejsapi=1というパラメータを追加することでYoutubeのJavaScript APIを有効にすることができます。

関連記事

  • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日 jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法
  • javascriptでjQueryの$(this).addClass()と同じ扱いを再現する方法(クリックした要素編)2019年1月27日 javascriptでjQueryの$(this).addClass()と同じ扱いを再現する方法(クリックした要素編)
  • 超簡単!jsでカウントダウンタイマー(残り〜日)を設置する方法2019年1月30日 超簡単!jsでカウントダウンタイマー(残り〜日)を設置する方法
  • スマホブラウザ(chrome、safariなど)で『戻る』ボタンをクリックした時にリロードする方法2018年9月11日 スマホブラウザ(chrome、safariなど)で『戻る』ボタンをクリックした時にリロードする方法
  • 【jQuery】簡単プラグイン不要!高さを揃えるjsを実装する方法2018年5月12日 【jQuery】簡単プラグイン不要!高さを揃えるjsを実装する方法

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.