在bootstrap模式中的youtube视频只显示一个空白播放器

时间:2014-02-06 08:52:25

标签: php twitter-bootstrap

将youtube视频放置在模态中的此引导代码只显示模态中的空白播放器。我将$ banger变量传递给模态代码,但它没有显示视频。发生什么事了......?

 <!-- Modal -->
 <div class="modal fade" id="Video_One" tabindex="-1" role="dialog">
 <div class="modal-dialog">
 <div class="modal-content" >
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;     </button>

 <h3 class="modal-title" style="background:tan; margin:0 auto" id="myModalLabel"></h3> 

 </div>
 <div class="modal-body">

 <div class="flex-video widescreen">
 <iframe src="http://www.youtube.com/embed/<?php echo $banger; ?>?&amp;fmt=22&amp;autoplay=0;HD=1;rel=0" frameborder="0" ></iframe>
 </div>

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

 <!-- Button trigger modal -->
 <a href="#" <?php $banger="sgr-1_chRMc"?>data-toggle="modal" data-target="#Video_One">test 1</a>

 <a href="#" <?php $banger="Yqbj9xLugU8"?>data-toggle="modal" data-target="#Video_One">test 2</a>

 <a href="#" <?php $banger="g4oMfY7q-Uo"?>data-toggle="modal" data-target="#Video_One">test 3</a> 

1 个答案:

答案 0 :(得分:0)

看起来你正试图在客户端执行PHP代码

<?php $banger="sgr-1_chRMc"?>

您应该重新考虑使用JavaScript执行此操作。你应该将它绑定到show event

上的模态
$('#Video_One').on('show.bs.modal', function (e) {
  // get the video id from the clicked link
  ..............
  // apply the id to src
  $('#Video_One').attr('src', 'http://www.youtube.com/embed/' + video_id + ?&amp;fmt=22&amp;autoplay=0;HD=1;rel=0'

})