埋め込み動画のフィルタを作成するにはどうすればよいですか？

Question

クリックすると、データフィルタでタグ付けされたページの動画をフィルタリングするナビゲーションリンクを作成します。これはHTMLでもできますか？ jQueryが必要ですか？

<ul class="nav navbar-nav navbar-left"> 
    <li><a href="#" data-filter="video1" tabindex="-1">Video 2</a></li> 
    <li><a href="#" data-filter="video2" tabindex="-1">Video 1</a></li> 
</ul> 

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> 
     <h4>Video 2 title</h4> 
      <div class="embed-responsive embed-responsive-16by9" data-filter="video2"> 
      <iframe class="embed-responsive-item" src="video2" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe> 
      </div> 
</div> 
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> 
     <h4>Video 1 title</h4> 
      <div class="embed-responsive embed-responsive-16by9" data-filter="video1"> 
      <iframe class="embed-responsive-item" src="video1" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe> 
      </div> 
</div> 

Answer 1

ユーザーに表示される内容を操作するには、何らかのjavascriptが必要です。

おそらく使いやすいIDとクラスの値は、物事を単純化するためのものです。

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 video video2"> 
     <h4>Video 2 title</h4> 
      <div class="embed-responsive embed-responsive-16by9" > 
      <iframe class="embed-responsive-item" src="video2" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe> 
      </div> 
</div> 

次にあなたが

<ul class="nav navbar-nav navbar-left"> 
    <li><a href="#" id="video1" class="videoFilterBtn" tabindex="-1">Video 2</a></li> 
    <li><a href="#" id="video2" class="videoFilterBtn" tabindex="-1">Video 1</a></li> 
</ul> 

を使用することができますし、あなたのスクリプトは、私が行っていることは、映像のiframeをラップトップレベルのdivに2クラスを追加で

$(document).ready(function() { 
    $(".videoFilterBtn").on("click", function(e){ 
     e.preventDefault() // stop default click events like navigation 
     $(".video").hide() // hide all videos 
     $("#" + $(this).prop("id")).show() // show the one with class matching this element id 
    } 
}); 

になります。一方はすばやくすべての動画を非表示にする一般的な '動画'クラスで、もう一方は 'video2'などのデータフィルタの動画番号と一致します。

次に、id要素を各要素に追加し、クラスをクリックイベントにフックしました。

スクリプトは言う：

1. は= videoFilterBtn
2. は彼らに
3. は、デフォルトのブラウザのクリック動作を停止しますクリックイベントを添付するクラスを持つ要素を見つけます。
4. 'ビデオ'クラス（およびその子要素）を持つ要素を非表示にする
5. クリックした要素のid値に一致するクラスを持つ要素をすべて表示します。

セクシーな効果を望む場合は、.fadeOut（）の.hide（）と.fadeIn（）の.show（）を変更します。

また、jqueryにリンクする必要があります。

PS。 iframeではなくobjectを使用して動画をホストすることを検討することをおすすめします。