将 YouTube 视频添加到 Bootstrap 主题

Question

我想添加一个在点击图片时弹出的 YouTube 视频。目前，该代码显示一个 VIMEO 视频。

<div class="col-md-offset-1 col-md-10">
    <ul id="grid" class="grid-wrapper">
        <li class="col-md-5 mix web"> <a href="img/portfolio/large/01.png" class="popup-image" title="Project Description"><div class="overlay"><span>Project Title</span><i class="fa fa-search"></i></div><img src="img/portfolio/small/01.png" alt="" ></a> 
        </li>
        <li class="col-md-5 mix video"> <a href="#" class="popup-vimeo" title="Project Description"><div class="overlay"><span>Project Title</span><i class="fa fa-play"></i></div><img src="img/portfolio/small/02.jpg" alt="" ></a>
        </li>
        <li class="col-md-5 mix branding"> <a href="img/portfolio/large/03.png" class="popup-image" title="Project Description"><div class="overlay"><span>Project Title</span><i class="fa fa-search"></i></div><img src="img/portfolio/small/03.png" alt="" ></a>
        </li>
        <li class="col-md-5 mix web"> <a href="img/portfolio/large/04.png" class="popup-image" title="Project Description"><div class="overlay"><span>Project Title</span><i class="fa fa-search"></i></div><img src="img/portfolio/small/04.png" alt="" ></a>
        </li>
        <li class="col-md-5 mix video"> <a href="#" class="popup-vimeo" title="Project Description"><div class="overlay"><span>Project Title</span><i class="fa fa-play"></i></div><img src="img/portfolio/small/05.png" alt="" ></a>
        </li>
    </ul>
</div>

Answer 1

<div class="YoutubeButton" data-toggle="modal" data-target="#Modal">click here for video</div>                                      <!-- Modal -->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
                <button type="button" class="close" data-dismihidden="true">&times;</button>
                <div class="modal-body">

                   <div class="videoWrapper">         
                      <iframe width="100%" height="450" src="//www.youtube.com/embed/the id of youtube video" frameborder="0" allowfullscreen></iframe>
                   </div>

               </div>

         </div>
    </div>  
</div>

不用写jquery

http://getbootstrap.com/javascript/#modals

Answer 2

如果您想要 Demo 之类的内容，请以模态方式打开视频

HTML

<div class="col-md-offset-1 col-md-10">
    <ul id="grid" class="grid-wrapper">
        <li class="col-md-5 mix web"> <a href="img/portfolio/large/01.png" class="popup-image" title="Project Description"><div class="overlay"><span>Project Title</span><i class="fa fa-search"></i></div><img src="img/portfolio/small/01.png" alt="" ></a> 
        </li>
        <li class="col-md-5 mix video"> <a href="#" class="popup-vimeo" title="Project Description"><div class="overlay"><span>Project Title</span><i class="fa fa-play"></i></div><img src="img/portfolio/small/02.jpg" alt="" ></a>
        </li>
        <li class="col-md-5 mix branding"> <a href="img/portfolio/large/03.png" class="popup-image" title="Project Description"><div class="overlay"><span>Project Title</span><i class="fa fa-search"></i></div><img src="img/portfolio/small/03.png" alt="" ></a>
        </li>
        <li class="col-md-5 mix web"> <a href="img/portfolio/large/04.png" class="popup-image" title="Project Description"><div class="overlay"><span>Project Title</span><i class="fa fa-search"></i></div><img src="img/portfolio/small/04.png" alt="" ></a>
        </li>
        <li class="col-md-5 mix video"> <a href="#" class="popup-vimeo" title="Project Description"><div class="overlay"><span>Project Title</span><i class="fa fa-play"></i></div><img src="img/portfolio/small/05.png" alt="" ></a>
        </li>
    </ul>
</div>



<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
            </div>
        </div>
    </div>
</div>

jQuery

$('.video').click(function () {
    var src = '//www.youtube.com/embed/9KunP3sZyI0';
    $('#myModal').modal('show');
    $('#myModal iframe').attr('src', src);
});

$('#myModal button').click(function () {
    $('#myModal iframe').removeAttr('src');
});

Answer 3

您可以添加一个包含您的 URL YouTube 的 div（显示：无），并使用 jQuery 创建一个操作 (click()) 来显示它：

$(".myimage").click(function() {
    $("myvideo").show();
});