Добавление видео 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 (в дисплее: нет), который содержит ваш URL YouTube и с Jquery вы создаете действие (нажмите()), которые отображают его так:

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

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

<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