質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

jquery モダールウインドウを閉じると同時にyoutubeを停止したい。

yoso
yoso

総合スコア27

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

3回答

0評価

1クリップ

17322閲覧

投稿2016/12/20 11:22

編集2016/12/20 16:00

素人ですがwordpressでホームページを作成しております。

動画ギャラリーとして、動画のキャプチャ画像をクリックすると
モダールウインドウが開きその中に
「iframeでyoutubeの埋め込み+説明」が表示されるようjqueryを使用し作成しました。

見た目は問題ないのですが、
1、モダールウインドウを閉じても音声が消えない(動画も再生され続けているよう)
2、別の動画を再生すると音声が二重で流れる
ことに困っています。

http://www.webdesignleaves.com/wp/jquery/625/

上記等を参考にし.remove();を用いてみたのですが

モダールウインドウを閉じると同時にyoutubeが終了(youtubeの埋め込み自体が消える)ため音声は消えますが、
再び同じ動画を見ようとモダールウインドウを開いてもyoutubeの埋め込みが非表示となり2回目の閲覧ができません。

・モダールウインドウを閉じると同時にyoutubeの再生を停止する
もしくは
・別の動画が流れ出した時点で、先に流れていた動画を停止する

方法がありましたらご教授下さい。

【現在のソースコード】

<STYLE TYPE="text/css"> span { display:none; } .modal-content { width: 910px ; height: 360px ; margin: 0 ; padding: 20px 20px ; border: 0px solid #aaa ; background: #fff ; position: fixed ; display: none ; z-index: 2 ; } #modal-overlay { z-index: 1 ; display: none ; position: fixed ; top: 0 ; left: 0 ; width: 100% ; height: 120% ; background-color: rgba( 255,255,255, 0.75 ) ; } .button-link { color: #00f ; text-decoration: underline ; } .button-link:hover { cursor: pointer ; color: #f00 ; } </STYLE> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ //グローバル変数 var nowModalSyncer = null ; //現在開かれているモーダルコンテンツ var modalClassSyncer = "modal-syncer" ; //モーダルを開くリンクに付けるクラス名 //モーダルのリンクを取得する var modals = document.getElementsByClassName( modalClassSyncer ) ; //モーダルウィンドウを出現させるクリックイベント for(var i=0,l=modals.length; l>i; i++){ //全てのリンクにタッチイベントを設定する modals[i].onclick = function(){ //ボタンからフォーカスを外す this.blur() ; //ターゲットとなるコンテンツを確認 var target = this.getAttribute( "data-target" ) ; //ターゲットが存在しなければ終了 if( typeof( target )=="undefined" || !target || target==null ){ return false ; } //コンテンツとなる要素を取得 nowModalSyncer = document.getElementById( target ) ; //ターゲットが存在しなければ終了 if( nowModalSyncer == null ){ return false ; } //キーボード操作などにより、オーバーレイが多重起動するのを防止する if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する //オーバーレイを出現させる $( "body" ).append( '<div id="modal-overlay"></div>' ) ; $( "#modal-overlay" ).fadeIn( "fast" ) ; //コンテンツをセンタリングする centeringModalSyncer() ; //コンテンツをフェードインする $( nowModalSyncer ).fadeIn( "slow" ) ; //[#modal-overlay]、または[#modal-close]をクリックしたら… $( "#modal-overlay,#modal-close" ).unbind().click( function() { //[#modal-content]と[#modal-overlay]をフェードアウトした後に… $( "#" + target + ",#modal-overlay" ).fadeOut( "fast" , function() { //[#modal-overlay]を削除する $( '#modal-overlay' ).remove() ; } ) ; //現在のコンテンツ情報を削除 nowModalSyncer = null ; } ) ; } } //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する $( window ).resize( centeringModalSyncer ) ; //センタリングを実行する関数 function centeringModalSyncer() { //モーダルウィンドウが開いてなければ終了 if( nowModalSyncer == null ) return false ; //画面(ウィンドウ)の幅、高さを取得 var w = $( window ).width() ; var h = $( window ).height() ; //コンテンツ(#modal-content)の幅、高さを取得 // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。 // var cw = $( nowModalSyncer ).outerWidth( {margin:true} ) ; // var ch = $( nowModalSyncer ).outerHeight( {margin:true} ) ; var cw = $( nowModalSyncer ).outerWidth() ; var ch = $( nowModalSyncer ).outerHeight() ; //センタリングを実行する $( nowModalSyncer ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ; } } ) ; </script> <br><br> <!-- 1つ目のコンテンツ [開始] --> <div id="modal-content-01" class="modal-content"> <!-- モーダルウィンドウのコンテンツ開始 --> <p><iframe src="https://www.youtube.com/embed/aaa" width="512" height="288" align="left" frameborder="0" id="vimeoPlayer_01" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display: block;" padding_right="10"></iframe><img src="説明文書画像" alt="0" width="350" height="283" size-full wp-image-117"/></p> <p><a id="modal-close" class="button-link"><img src="閉じるボタン"/></a><br></p> <!-- モーダルウィンドウのコンテンツ終了 --> </div> <!-- 1つ目のコンテンツ [終了] --> <!-- 2つ目のコンテンツ [開始] --> <div id="modal-content-02" class="modal-content"> <!-- モーダルウィンドウのコンテンツ開始 --> <p><iframe src="https://www.youtube.com/embed/bbb" width="512" height="288" align="left" frameborder="0" id="vimeoPlayer_01" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display: block;" padding_right="10"></iframe><img src="説明文書画像" alt="1" width="350" height="283" size-full wp-image-118" /></p> <p><a id="modal-close" class="button-link"><img src="閉じるボタン"/></a><br></p> <!-- モーダルウィンドウのコンテンツ終了 --> </div> <!-- 2つ目のコンテンツ [終了] --> <!-- 3つ目のコンテンツ [開始] --> <div id="modal-content-03" class="modal-content"> <!-- モーダルウィンドウのコンテンツ開始 --> <p><iframe src="https://www.youtube.com/embed/ccc" width="512" height="288" align="left" frameborder="0" id="vimeoPlayer_01" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display: block;" padding_right="10"></iframe><img src="説明文書画像" alt="2" width="350" height="283" size-full wp-image-119" /> </p> <p><a id="modal-close" class="button-link"><img src="閉じるボタン"/></a><br></p> <!-- モーダルウィンドウのコンテンツ終了 --> </div> <!-- 3つ目のコンテンツ [終了] --> <!-- 4つ目のコンテンツ [開始] --> <div id="modal-content-04" class="modal-content"> <!-- モーダルウィンドウのコンテンツ開始 --> <p><iframe src="https://www.youtube.com/embed/ddd" width="512" height="288" align="left" frameborder="0" id="vimeoPlayer_01" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display: block;" padding_right="10"></iframe><img src="説明文書画像" alt="3" width="350" height="283" size-full wp-image-120" /> </p> <p><a id="modal-close" class="button-link"><img src="閉じるボタン"/></a><br></p> <!-- モーダルウィンドウのコンテンツ終了 --> </div> <!-- 4つ目のコンテンツ [終了] --> <table><tr><td> <p><a class="modal-syncer button-link" data-target="modal-content-01"><img src="動画キャプチャ"></a></p> </td><td> <p><a class="modal-syncer button-link" data-target="modal-content-02"><img src="動画キャプチャ"></a></p> </td></tr><tr><td> <p><a class="modal-syncer button-link" data-target="modal-content-03"><img src="動画キャプチャ"></a></p> </td><td> <p><a class="modal-syncer button-link" data-target="modal-content-04"><img src="動画キャプチャ"></a></p> </td></tr></table>

以上です。

ネットで調べながら書き加えていきましたので、めちゃくちゃかと思います。
「画像」「埋め込みURL」はダミーです。

よろしくお願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

kei344

2016/12/20 15:52

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
yoso

2016/12/20 16:01

ご指摘ありがとうございます。コピペで作成しましたのでよく理解しておりません、申し訳ありませんがよろしくお願いします。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。