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

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

ただいまの
回答率

90.00%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,161

takesu

score 12

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

<ul class="chapter">
<li class="movie1"><a href="http://www.youtube.com/embed/Bk3b5Yxpg5Y?rel=0&autoplay=1" video="Bk3b5Yxpg5Y">youtube1</a></li>
<li class="movie2"><a href="http://www.youtube.com/embed/NXEHNs-A13g?rel=0&autoplay=1" video="NXEHNs-A13g">youtube</a></li>
<li class="movie3"><a href="http://www.youtube.com/embed/tOombs9YrRA?rel=0&autoplay=1" video="tOombs9YrRA">youtube1</a></li>
<li class="movie4"><a href="http://www.youtube.com/embed/FRIj3loBNjk?rel=0&autoplay=1" video="FRIj3loBNjk">youtube1</a></li>
</ul>
<div class="movie">
<div id="mMovieWrap_Sp">
<div id="mMovieWrap">
<div id="mMovie">
<div class="cover"></div>
<div id="video1"></div>
</div>
<div id="playerarea">
<div id="video2"></div>
</div>
</div>
</div>
<div>
<ul class="chapter">
<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>
<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>
<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>
<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>
</ul>
</div>
</div>
    var tag = document.createElement('script');
    tag.src = "http://www.youtube.com/iframe_api/";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 再生準備を行います。
    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('video1', {
        videoId: 'Bk3b5Yxpg5Y',
        playerVars: {'autoplay': 0, 'controls': 1, 'rel': 0, 'showinfo':0, 'loop': 0,'wmode':'opaque'},
      });
    }

// 呼び出されます。

    $(function() {
        $('#mMovie .cover').on('click', function() {
        $('.chapter li.movie1 a').addClass('active');
        $('.chapter li.movie1 a').find('img').attr('src', $('.chapter li.movie1 a').find('img').attr('src').replace('.jpg', '_ov.jpg'));

            $(this).css('display','none');
                player.seekTo(0);
                player.playVideo();
            });

            function chapterC(){
                $('.chapter li a').click(function() {
                    var self = $(this);
                    player.pauseVideo();
                    var nowVideo=$(this).attr('video');
                    $('#mMovie').css({'display':'none'});

                    $('#video2').html('');
                    $('#video2').append('<iframe src="//www.youtube.com/embed/' + nowVideo + '?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>');
                });
            };

             chapterC();
        });





    $(function() {
            $('.movie').find('a').attr('href', 'javascript:void(0)');
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

こんにちは。
 
質問の本題から外れた回答なので、お役に立てるか心もとないのですが、
<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/28 06:50

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

    キャンセル

  • 2018/02/28 09:06

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

    キャンセル

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

  • ただいまの回答率 90.00%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる