Bootstrap 3模式未加载YouTube视频

时间:2013-11-01 18:07:06

标签: jquery twitter-bootstrap

使用Bootstrap 3和它的模态,我正在尝试通过rel属性和jQuery加载YouTube视频。我以前在Bootstrap 2.3.2模态上工作,但是对于BS3,我也不能。我得到模态窗口显示,但没有任何加载。

HTML:

<div id="myModal" class="modal fade yt-link" rel="kfVsfOSbJY0">
    <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>
                <h1 class="h3">It's Friday!</h1>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

JS:

$('.yt-link').on('show', function () {
    $(this).html('<iframe width="533" height="400" src="https://www.youtube.com/embed/' + $(this).attr('rel') + '?rel=0;showinfo=0;autohide=1;controls=2;autoplay=1" frameborder="0" allowfullscreen></iframe>');
});

$('.yt-link').on('hide', function () {
    $(this).html('&nbsp;');
});

1 个答案:

答案 0 :(得分:0)

<强>价:

http://getbootstrap.com/javascript/#modals(见活动)

$('.yt-link').on('show', function () {

适用于TB 2.他们在TB3中改变了这一点

$('.yt-link').on('show.bs.modal', function () {

并隐藏

$('.yt-link').on('hide.bs.modal', function () {