以模态显示 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 只是...

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

如果您能提供帮助，我将不胜感激。

Answer 1

我建议您以后检查 bootsnipp.com 以了解此类问题/sn-ps。

这里有一个 sn-p，它完全符合您的要求 bootsnipp.com/snippets/D2Pnq

这是那个 sn-p 的代码。

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();
});