YouTube動画をモーダルで表示

Question

この検索機能を使用して、検索条件に基づいて動画のリストを設定できます。

// Execute search 
function search(){ 
    // Clear Results 
    $('#results').html(''); 
    $('#buttons').html(''); 

    // Get Form Input 
    q = $('#query').val(); 

    // Run GET Request on API 
    $.get(
     "https://www.googleapis.com/youtube/v3/search",{ 
      part: 'snippet, id', 
      q: q, 
      type:'video', 
      key: 'YouTubeData_API_KEY'}, 
     function(data){ 
      var nextPageToken = data.nextPageToken; 
      var prevPageToken = data.prevPageToken; 

      // Log Data 
      console.log(data); 

      $.each(data.items, function(i, item){ 
       // Get Output 
       var output = getOutput(item); 

       // Display Results 
       $('#results').append(output); 
      }); 

      var buttons = getButtons(prevPageToken, nextPageToken); 

      // Display Buttons 
      $('#buttons').append(buttons); 

      // Display video in a modal 
      $('.video-title').click(function (event) { 
      event.preventDefault(); 
      // unhide modal here when you see the console.log populate 
      console.log('you clicked the title'); 
      $('#modal').removeClass('hidden'); 
     }); 
     } 
    ); 
} 

しかし、ビデオタイトルをクリックすると、これをモーダル/ライトボックスに挿入しようとしています。私はこの機能で出力を構築することでこれをしようとしています。

// Build Output 
function getOutput(item){ 
    var videoId = item.id.videoId; 
    var title = item.snippet.title; 
    var description = item.snippet.description; 
    var thumb = item.snippet.thumbnails.high.url; 
    var channelTitle = item.snippet.channelTitle; 
    var videoDate = item.snippet.publishedAt; 

    // Build Output String 
    var output = '<li>' + 
     '<div class="list-left">' + 
     '<img src="'+thumb+'">' + 
     '</div>' + 
     '<div class="list-right">' + 
     '<h3>' + 
     '<a class="video-title" href="http://www.youtube.com/embed/'+videoId+'">'+title+'</a>'+ 
     '</h3>' + 
     '<small>By <span class="cTitle">'+channelTitle+'</span> on '+videoDate+'</small>' + 
     '<p>'+description+'</p>' + 
     '</div>' + 
     '</li>' + 
     '<div class="clearfix"></div>' + 
     ''; 

    return output; 
} 

モーダルを表示してユーザーに動画を再生させる方法を見つけようとしています。私が目標としている事業部はちょうど...

<div class="hidden" id="modal"></div> 

お手伝いできれば幸いです。

Answer 1

これらのタイプの質問/スニペットについては、将来bootsnipp.comをチェックすることをお勧めします。ここで

あなたは bootsnipp.com/snippets/D2Pnq

を達成したい、まさにここでそのスニペットのコードだんスニペットです。

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-12"> 
      <div class="jumbotron text-center"> 
       <a href='#myModal' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#playerModal'> 
        Youtube Video 
       </a> 
      </div> 
      <div class="modal fade" id='playerModal' role='dialog' tabindex='-1'> 
       <div class="modal-dialog modal-lg"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
        <button class="close" aria-label='Close' data-dismiss='modal', type='button'> 
         <span aria-hidden='true'>×</span></button> 
        <h4 class="modal-title">Video title</h4> 
        </div> 
        <div class="modal-body"> 
        <div class="embed-responsive embed-responsive-16by9"> 
         <div id="player" class="embed-responsive-item"></div> 
        </div> 
        </div> 
        <div class="modal-footer"> 
        <button class="btn btn-default" data-dismiss='modal' type='button'> 
         Close 
        </button> 
        </div> 
       </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

JAVASCRIPT

// Youtube API Functions (https://developers.google.com/youtube/iframe_api_reference) 
// ============================================= 

var tag = document.createElement('script'); 

tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

//### Variables 
var player; 
var playerModal = $('#playerModal'); 

//### Youtube API 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: 'L2Ew6JzfZC8' 
    }); 
} 

//### Modal Controls (http://getbootstrap.com/javascript/#modals) 
// Modal when show, begin to play video 
playerModal.on('show.bs.modal', function (e) { 
    player.playVideo(); 
}); 

// Modal when hidden, pause or stop playing video 
playerModal.on('hidden.bs.modal', function (e) { 
    player.pauseVideo(); 
    //player.stopVideo(); 
});