【问题标题】:Open a youtube video in bootstrap modal box在引导模式框中打开一个 youtube 视频
【发布时间】:2018-05-09 03:35:08
【问题描述】:

我正在从 sql 表中列出视频数据。

该表中的字段: - sidebar_video_id(自动递增) - sidebar_video_nev - sidebar_video_link(完整网址) - sidebar_video_v_id(来自 url 末尾的视频 id)

我想要的是,当我点击每个视频时,它会在引导模式框中打开并播放。现在盒子打开了,但它是空的,我没有收到任何控制台错误。

<?php
$get_videos = mysqli_query($kapcs, "SELECT * FROM sidebar_video");
if(mysqli_num_rows($get_videos) > 0 )
{
    while($vid = mysqli_fetch_assoc($get_videos))
    {
        echo '<div class="sidebar_youtube_box">';
        echo '<a href="#" id="'.$vid['sidebar_video_v_id'].'" data-url="'.$vid['sidebar_video_link'].'" class="open_youtube_modal" title="'.$vid['sidebar_video_nev'].'"><img src="http://img.youtube.com/vi/'.$vid['sidebar_video_v_id'].'/hqdefault.jpg" class="img-responsive"></a>';
        echo '</div>';
    }
}
?>


<div class="modal fade" id="videoModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Bezárás</span></button>
        <h4 class="modal-title" id="myModalLabel">Videó megtekintése</h4>
      </div>
      <div class="modal-body" id="video_modal_body">

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

$('.open_youtube_modal').click(function(e) {
        e.preventDefault();
        var v_id = $(this).attr('id');
        var full_url = $(this).attr('data-url');

        var embed_html = '<iframe width="560" height="315" src="' + full_url + '" frameborder="0" allowfullscreen></iframe>';

        //alert(embed_html);

        $('#video_modal_body').html(embed_html);
        $('#videoModal').modal('show');

    });

【问题讨论】:

  • full_url 返回正确的值? / 控制台或 php 错误日志中是否有任何错误?

标签: javascript jquery twitter-bootstrap video youtube


【解决方案1】:

您必须使用@987654321@ 格式而不是@987654322@。 Youtube 不允许与后者进行跨域框架。

【讨论】:

  • 您好!这样可行!但是如果我关闭模式,我怎么能停止视频?
  • @KissTom87 好吧,这是另一个问题,但最简单的方法是在 hidden.bs.modal 事件上销毁 #video_modal_body 的内容,如下所示: $('#videoModal').on(' hidden.bs.modal', function (e) { $('#video_modal_body').html('');})
猜你喜欢
  • 1970-01-01
  • 2016-07-26
  • 2020-07-21
  • 2020-11-30
  • 2016-02-25
  • 2020-10-24
  • 1970-01-01
  • 2011-02-02
  • 1970-01-01
相关资源
最近更新 更多