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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

350閲覧

youtube iframeを<a>でラップして、iframeをクリックしても再生しないようにしたい

takesu

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2018/02/20 09:40

イメージ説明
4つ並びのリストになっているiframeで埋め込まれた動画をクリックすると、その場所でiframeは再生されず(動作せず)、上の大きいところで選択したyoutubeが再生されるようにしたいです。

html

1<ul class="chapter"> 2<li class="movie1"><a href="http://www.youtube.com/embed/Bk3b5Yxpg5Y?rel=0&autoplay=1" video="Bk3b5Yxpg5Y">youtube1</a></li> 3<li class="movie2"><a href="http://www.youtube.com/embed/NXEHNs-A13g?rel=0&autoplay=1" video="NXEHNs-A13g">youtube</a></li> 4<li class="movie3"><a href="http://www.youtube.com/embed/tOombs9YrRA?rel=0&autoplay=1" video="tOombs9YrRA">youtube1</a></li> 5<li class="movie4"><a href="http://www.youtube.com/embed/FRIj3loBNjk?rel=0&autoplay=1" video="FRIj3loBNjk">youtube1</a></li> 6</ul>

html

1<div class="movie"> 2<div id="mMovieWrap_Sp"> 3<div id="mMovieWrap"> 4<div id="mMovie"> 5<div class="cover"></div> 6<div id="video1"></div> 7</div> 8<div id="playerarea"> 9<div id="video2"></div> 10</div> 11</div> 12</div> 13<div> 14<ul class="chapter"> 15<li class="movie1"><a href="http://www.youtube.com/embed/Bk3b5Yxpg5Y?rel=0&autoplay=1" video="Bk3b5Yxpg5Y"><iframe width="560" height="315" src="https://www.youtube.com/embed/Bk3b5Yxpg5Y" frameborder="0"></iframe></a></li> 16<li class="movie2"><a href="http://www.youtube.com/embed/NXEHNs-A13g?rel=0&autoplay=1" video="NXEHNs-A13g"><iframe width="560" height="315" src="https://www.youtube.com/embed/NXEHNs-A13g" frameborder="0"></iframe></a></li> 17<li class="movie3"><a href="http://www.youtube.com/embed/tOombs9YrRA?rel=0&autoplay=1" video="tOombs9YrRA"><iframe width="560" height="315" src="https://www.youtube.com/embed/tOombs9YrRA" frameborder="0"></iframe></a></li> 18<li class="movie4"><a href="http://www.youtube.com/embed/FRIj3loBNjk?rel=0&autoplay=1" video="FRIj3loBNjk"><iframe width="560" height="315" src="https://www.youtube.com/embed/FRIj3loBNjk" frameborder="0"></iframe></a></li> 19</ul> 20</div> 21</div>

javascript

1 2 var tag = document.createElement('script'); 3 tag.src = "http://www.youtube.com/iframe_api/"; 4 var firstScriptTag = document.getElementsByTagName('script')[0]; 5 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 6 7// 再生準備を行います。 8 var player; 9 function onYouTubeIframeAPIReady() { 10 player = new YT.Player('video1', { 11 videoId: 'Bk3b5Yxpg5Y', 12 playerVars: {'autoplay': 0, 'controls': 1, 'rel': 0, 'showinfo':0, 'loop': 0,'wmode':'opaque'}, 13 }); 14 } 15 16// 呼び出されます。 17 18 $(function() { 19 $('#mMovie .cover').on('click', function() { 20 $('.chapter li.movie1 a').addClass('active'); 21 $('.chapter li.movie1 a').find('img').attr('src', $('.chapter li.movie1 a').find('img').attr('src').replace('.jpg', '_ov.jpg')); 22 23 $(this).css('display','none'); 24 player.seekTo(0); 25 player.playVideo(); 26 }); 27 28 function chapterC(){ 29 $('.chapter li a').click(function() { 30 var self = $(this); 31 player.pauseVideo(); 32 var nowVideo=$(this).attr('video'); 33 $('#mMovie').css({'display':'none'}); 34 35 $('#video2').html(''); 36 $('#video2').append('<iframe src="//www.youtube.com/embed/' + nowVideo + '?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>'); 37 }); 38 }; 39 40 chapterC(); 41 }); 42 43 44 45 46 47 $(function() { 48 $('.movie').find('a').attr('href', 'javascript:void(0)'); 49});

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

質問の本題から外れた回答なので、お役に立てるか心もとないのですが、
<ul> に並べるのを、動画の <iframe>ではなくて、
サムネイル画像にして、以下のようなものを作ってみました。

https://jsfiddle.net/jun68ykt/1Lh3sqt3/70/

サムネイルを取得するURLは、以下を参考にしました。

How do I get a YouTube video thumbnail from the YouTube API?


追記

stackoverflow に以下をみつけました。

disable-iframe-onclick-pause

Try this trick for iframe or iframe wrapper:

#ytplayer {pointer-events: none;}

350D answered Jan 22 '15 at 15:47

  
これにそって、作ってみたデモが以下です。

https://jsfiddle.net/jun68ykt/y87j4xxs/5/

上記で、私のブラウザ(Mac用 Chrome v.64)では、意図どおり、サムネイルのほうの
<iframe> をクリックしても、この中での再生はしなくなりました。

以上参考になれば幸いです。

投稿2018/02/25 02:45

編集2018/02/25 06:56
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takesu

2018/02/27 21:50

おお!すごい。サムネイル化できるんですね!! まさに望んでいたものです(質問が悪くてすみません^^;) ありがとうございます。
jun68ykt

2018/02/28 00:06

解決されたようですね、よかったです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問