Bootstrap 3 và Youtube ở chế độ


156

Tôi đang cố gắng sử dụng tính năng Modal từ Bootstrap 3 để hiển thị video Youtube của mình. Nó hoạt động, nhưng tôi không thể nhấp vào bất kỳ nút nào trong video Youtube.

Bất kỳ trợ giúp về điều này?

Đây là mã của tôi:

<div id="link">My video</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>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script>
    $('#link').click(function () {
        var src = 'http://www.youtube.com/v/FSi2fJALDyQ&amp;autoplay=1';
        $('#myModal').modal('show');
        $('#myModal iframe').attr('src', src);
    });

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

Câu trả lời:


106

Tôi đã tìm thấy vấn đề này (hoặc sự cố tôi đã tìm thấy và mô tả tại https://github.com/twbs/bootstrap/issues/10361 ) liên quan đến chuyển đổi CSS3 (bản dịch) trên .modal.fade .modal-dialoglớp.

Trong bootstrap.css, bạn sẽ tìm thấy các dòng hiển thị bên dưới:

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
          transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
     -moz-transition: -moz-transform 0.3s ease-out;
       -o-transition: -o-transform 0.3s ease-out;
          transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}

Thay thế các dòng này bằng dòng sau sẽ hiển thị phim chính xác (trong trường hợp của tôi):

.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform 0.3s ease-out;
     -moz-transition: -moz-transform 0.3s ease-out;
       -o-transition: -o-transform 0.3s ease-out;
          transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {

}

4
Đây không phải là câu trả lời được chấp nhận. Một không được chỉnh sửa các tập tin css nguồn.
emix

38

Tôi kết hợp tập lệnh phương thức video động YouTube / html động này để tự động phát video YouTube khi nhấp vào kích hoạt (liên kết), trình kích hoạt cũng chứa liên kết để phát. Kịch bản lệnh sẽ tìm cuộc gọi phương thức bootstrap riêng và mở mẫu phương thức được chia sẻ với dữ liệu từ trình kích hoạt. Xem bên dưới và cho tôi biết những gì bạn nghĩ. Tôi rất thích nghe suy nghĩ ...

TRIGGER HTML MODAL:

 <a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s" >VIDEO</a>

MÔ HÌNH VIDEO MODAL HTML:

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div>
          <iframe width="100%" height="350" src=""></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

CHỨC NĂNG YÊU CẦU:

//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
function autoPlayYouTubeModal(){
  var trigger = $("body").find('[data-toggle="modal"]');
  trigger.click(function() {
    var theModal = $(this).data( "target" ),
    videoSRC = $(this).attr( "data-theVideo" ), 
    videoSRCauto = videoSRC+"?autoplay=1" ;
    $(theModal+' iframe').attr('src', videoSRCauto);
    $(theModal+' button.close').click(function () {
        $(theModal+' iframe').attr('src', videoSRC);
    });   
  });
}

CUỘC GỌI CHỨC NĂNG:

$(document).ready(function(){
  autoPlayYouTubeModal();
});

FIDDLE: http://jsfiddle.net/jeremykenedy/h8daS/1/


8
Điều này liên kết một sự kiện với nút đóng mỗi khi bạn mở chế độ, và bạn cũng nên sử dụng hidden.bs.modalsự kiện này như một phương tiện để tắt video, bởi vì người dùng có thể làm những việc khác để đóng chế độ (ví dụ: nhấp vào bên ngoài nó).
Ian Clark

Tự động phát đi ngược lại các điều khoản API của Youtube. Vừa nhận được một ứng dụng bị từ chối khi sử dụng
webview

Âm thanh như ứng dụng của bạn có thể có cái gì đó sai với nó. Đây là tài liệu của YouTube. developers.google.com.vn/youtube/player_parameter support.google.com/youtube(/
jeremykenedy

1
+1 Có vẻ như chính Bootstrap đang đề cập đến câu trả lời của bạn: getbootstrap.com/docs/4.3/components/modal/ Kẻ
PhilMarc

19

Tôi có một lời khuyên cho bạn!

Tôi sẽ dùng:

$('#myModal').on('hidden.bs.modal', function () {
    $('#myModal iframe').removeAttr('src');
})

thay vì:

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

Bởi vì bạn cũng có thể đóng chế độ mà không cần nút, do đó, với mã này, nó sẽ xóa video mỗi khi phương thức sẽ ẩn.


Thoạt nhìn nó hoạt động, nhưng nếu bạn muốn mở lại phương thức này. Bạn không thể vì bạn đã xóa'src'
kanlukasz

17

Tìm thấy điều này trong một chủ đề khác, và nó hoạt động rất tốt trên máy tính để bàn và thiết bị di động - đó là điều không đúng với một số giải pháp khác. Thêm tập lệnh này vào cuối trang của bạn:

<!--Script stops video from playing when modal is closed-->
<script>
    $("#myModal").on('hidden.bs.modal', function (e) {
        $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
    });
</script>   

Mã này làm việc cho tôi. Đơn giản và hiệu quả! Cảm ơn bạn!
Raimundo Baravaglio


4

Nếu bạn không muốn chỉnh sửa CSS bootstrap hoặc tất cả những điều trên không giúp ích gì cho bạn (như trong trường hợp của tôi), có một cách dễ dàng để đưa video chạy theo phương thức trên Firefox.

Bạn chỉ cần xóa lớp "fade" khỏi phương thức và khi nó cũng mở lớp "trong":

$('#myModal').on('shown.bs.modal', function () {
    $('#myModal').removeClass('in');
});

4

Tôi đã giải quyết nó trên mẫu wordpress:

$videoLink ="http://www.youtube.com/watch?v=yRuVYkA8i1o;".   
<?php
    parse_str( parse_url( $videoLink, PHP_URL_QUERY ), $my_array_of_vars );
    $youtube_ID = $my_array_of_vars['v'];    
?> 
<a class="video" data-toggle="modal" data-target="#myModal" rel="<?php echo $youtube_ID;?>">
    <img src="<?php bloginfo('template_url');?>/assets/img/play.png" />
</a>

<div class="modal fade video-lightbox" id="myModal" 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">&times;</button>
            </div>
            <div class="modal-body"></div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script> 
    jQuery(document).ready(function ($) {
        var $midlayer = $('.modal-body');     
        $('#myModal').on('show.bs.modal', function (e) {
            var $video = $('a.video');
            var vid = $video.attr('rel');
            var iframe = '<iframe />';  
            var url = "//youtube.com/embed/"+vid+"?autoplay=1&autohide=1&modestbranding=1&rel=0&hd=1";
            var width_f = '100%';
            var height_f = 400;
            var frameborder = 0;
            jQuery(iframe, {
                name: 'videoframe',
                id: 'videoframe',
                src: url,
                width:  width_f,
                height: height_f,
                frameborder: 0,
                class: 'youtube-player',
                type: 'text/html',
                allowfullscreen: true
            }).appendTo($midlayer);   
        });

        $('#myModal').on('hide.bs.modal', function (e) {
            $('div.modal-body').html('');
        }); 
    });
</script>

4

Hãy thử điều này cho Bootstrap 4

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h2>Embedding YouTube Videos</h2>
<p>Embedding YouTube videos in modals requires additional JavaScript/jQuery:</p>

<!-- Buttons -->
<div class="btn-group">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/lQAUq_zs-XU">Launch Video 1</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/pvODsb_-mls">Launch Video 2</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/4m3dymGEN5E">Launch Video 3</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/uyw0VZsO3I0">Launch Video 4</button>
</div>

<!-- Modal -->
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark border-dark">
                <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body bg-dark p-0">
                <div class="embed-responsive embed-responsive-16by9">
                  <iframe class="embed-responsive-item" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<script>
$(document).ready(function() {
    // Set iframe attributes when the show instance method is called
    $("#videoModal").on("show.bs.modal", function(event) {
        let button = $(event.relatedTarget); // Button that triggered the modal
        let url = button.data("video");      // Extract url from data-video attribute
        $(this).find("iframe").attr({
            src : url,
            allow : "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        });
    });

    // Remove iframe attributes when the modal has finished being hidden from the user
    $("#videoModal").on("hidden.bs.modal", function() {
        $("#videoModal iframe").removeAttr("src allow");
    });
});
</script>

</body>
</html>

truy cập: https://parrot-tutorial.com/run_code.php?snippet=bs4_modal_youtube


2

Bootstrap không cung cấp chức năng bật lên theo chế độ.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a class="btn btn-primary" data-toggle="modal" href="#modal-video"><i class="fa fa-play"></i> watch video</a>
<div class="modal fade" id="modal-video" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">close <i class="fa fa-times"></i></button>
      </div>
      <div class="modal-body">
        <iframe type="text/html" width="640" height="360" src="//www.youtube.com/embed/GShZUiyqEH0?rel=0?wmode=transparent&amp;fs=1&amp;rel=0&amp;enablejsapi=1&amp;version=3" frameborder="0" allowfullscreen=""></iframe>
        <p>Your video</p>
      </div>
    </div>
  </div>
</div>


0

MMhh ... Bạn có thể đăng toàn bộ tài liệu HTML của mình và trình duyệt / phiên bản nào bạn đang sử dụng không?

Tôi đã tạo lại trang của bạn và thử nghiệm trên 3 trình duyệt (Chrome, FF, IE8). Tôi đã có thể dừng và bắt đầu đoạn giới thiệu WDS4 tuyệt vời mà không gặp vấn đề gì. Đây là mã của tôi:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="link">My video</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 (necessary for Bootstrap's JavaScript plugins) -->
    <script src="jq.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap.min.js"></script>
    <script>
    $('#link').click(function () {
        var src = 'http://www.youtube.com/v/FSi2fJALDyQ&amp;autoplay=1';
        $('#myModal').modal('show');
        $('#myModal iframe').attr('src', src);
    });

    $('#myModal button').click(function () {
        $('#myModal iframe').removeAttr('src');
    });
</script>
  </body>
</html>

Bạn có thể thử đưa Z-Index của trình phát phương thức của mình lên cao hơn trong ngăn xếp không?

$('#myModal iframe').css("z-index","999");


Tôi đã thử mã của bạn, nhưng nó không hoạt động. Tôi không thể nhấp vào bất kỳ nút nào trong video (tạm dừng, âm lượng, chất lượng, v.v.). Bạn có hiểu rằng tôi không thể sử dụng bất kỳ nút YOUTUBE nào không? Tôi đang xem nó trong Firefox. - Phiên bản nào của jquery bạn đang sử dụng? Tôi đang sử dụng 1.10.1 - Bạn đang sử dụng Bootstrap 3?
NitroMedia

Tiếp tục các thử nghiệm của tôi: KHÔNG LÀM VIỆC trong Firefox LÀM VIỆC trong Chrome LÀM VIỆC trong Safari
NitroMedia

Vì vậy, tôi sử dụng mã của bạn, kiểm tra nó ở mọi nơi và nó hoạt động ở mọi nơi trừ Firefox. Trên máy Mac, khi tôi cuộn lại một nút, màu sẽ thay đổi nhưng tôi không thể nhấp vào chúng. Trên PC, màn hình vẫn đen và video đang phát. Nó làm tôi điên! Tôi đã thử chạy firefox với chế độ an toàn, làm trống bộ nhớ cache, không có gì hoạt động.
NitroMedia

Tôi tìm thấy vấn đề tương tự. Dành cho Firefox cho ubfox 23.0. Nhưng tôi đã gặp một lỗi TypeError: Giá trị không phải là một đối tượng. s.ytimg.com/yts/jsbin/www-embed-player-vflwWlnaY.js (dòng 220). Trong chrome mã của bạn hoạt động.
Bass Jobsen

Mmhhh .. Tôi đã tạo lại nó cục bộ trên máy Mac của mình và nó cố tải xuống Video ID. Hãy để tôi đẩy nó đến máy chủ của tôi và xem nếu đó là một lỗi cục bộ.
TyMayn

0
<a href="#" class="btn btn-default" id="btnforvideo" data-toggle="modal" data-target="#videoModal">VIDEO</a>

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <div>
                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/myvideocode" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

0

sử dụng $('#introVideo').modal('show'); xung đột với kích hoạt thích hợp bootstrap. Khi bạn nhấp vào liên kết mở Modal, nó sẽ đóng lại ngay sau khi hoàn thành hiệu ứng mờ dần. Chỉ cần loại bỏ$('#introVideo').modal('show'); (sử dụng bootstrap v3.3.2)

Đây là mã của tôi:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- triggering Link -->
<a id="videoLink" href="#0" class="video-hp" data-toggle="modal" data-target="#introVideo"><img src="img/someImage.jpg">toggle video</a>


<!-- Intro video -->
<div class="modal fade" id="introVideo" tabindex="-1" role="dialog" aria-labelledby="introductionVideo" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item allowfullscreen"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>

<script>
  //JS

$('#videoLink').click(function () {
    var src = 'https://www.youtube.com/embed/VI04yNch1hU;autoplay=1';
    // $('#introVideo').modal('show'); <-- remove this line
    $('#introVideo iframe').attr('src', src);
});


$('#introVideo button.close').on('hidden.bs.modal', function () {
    $('#introVideo iframe').removeAttr('src');
})
</script>


0

Câu trả lời của user3084135 hoạt động tốt như một cơ sở cho tôi, nhưng tôi cũng cần kết hợp:

  1. Thẻ "video" cho video được lưu trữ cục bộ cũng như thẻ "iframe" cho video được lưu trữ bên ngoài
  2. Đảm bảo rằng nguồn đã bị xóa tuy nhiên phương thức đã bị loại bỏ
  3. Giải pháp hoạt động trong một thiết kế đáp ứng Bootstrap
  4. Tất cả video tự động phát trên chế độ mở
  5. Nhiều phương thức có thể

Giải pháp hoàn thành của tôi trông như thế này:

NÚT TRIGGER MODAL

<a href="#" class="portfolio-link" data-toggle="modal" data-frame="iframe" data-target="#portfolioModal1" data-theVideo="http://www.youtube.com/embed/xxxxxxxx">

Thuộc tính khung dữ liệu có thể là "iframe" hoặc "video" để phản ánh loại thẻ thích hợp: iframe cho các video bên ngoài, video cho lưu trữ cục bộ.

VIDEO CONTAINERS BOOTSTRAP

iFrame:

<div align="center" class="embed-responsive embed-responsive-16by9">
  <iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>

video:

<div align="center" class="embed-responsive embed-responsive-16by9">
    <video width="640" height="364" controls>
        <source src="" type="video/mp4">
        Your browser does not support the video tag.
    </video>                               
</div>

Cả hai đều nằm trong các div phương thức đáp ứng Bootstrap tiêu chuẩn.

QUẦN ÁO

<script>
 $(document).ready(function(){
    function autoPlayModal(){
      var trigger = $("body").find('[data-toggle="modal"]');
      trigger.click(function() {
        var theFrame = $(this).data( "frame" );
        var theModal = $(this).data( "target" );
        videoSRC = $(this).attr( "data-theVideo" ); 
        if (theFrame == "iframe") {
          videoSRCauto = videoSRC+"?autoplay=1" ;
        } else {
          videoSRCauto = videoSRC;
          $("[id*=portfolioModal] video").attr('autoplay','true');
        }
        $(theModal+' '+ theFrame).attr('src', videoSRCauto); 
        $("[id*=portfolioModal]").on('hidden.bs.modal', function () {
            $("[id*=portfolioModal] "+ theFrame).removeAttr('src');
        })
      });
    }

  autoPlayModal();
});
</script>

Vì tính năng tự động phát hoạt động khác nhau với thẻ iframe và video, nên một điều kiện được sử dụng để xử lý từng thẻ. Để cho phép nhiều phương thức, bộ chọn ký tự đại diện được sử dụng để xác định chúng (portfolioModal1-6 trong trường hợp của tôi).


0

Tôi cũng gặp vấn đề tương tự - Tôi vừa thêm các liên kết cdn tuyệt vời về phông chữ - nhận xét bootstrap bên dưới đã giải quyết vấn đề của tôi .. không thực sự khắc phục sự cố vì phông chữ tuyệt vời vẫn hoạt động -

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

0

Đồng ý. Tôi tìm thấy một giải pháp.

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h3 class="modal-title" id="modal-login-label">Capital Get It</h3>
                    <p>Log in:</p>
                </div>

                <div class="modal-body">

                    <h4>Youtube stuff</h4>



             <iframe src="//www.youtube.com/embed/lAU0yCDKWb4" allowfullscreen="" frameborder="0" height="315" width="100%"></iframe>       
             </div>


                </div>

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

0

Đối với Bootstrap 4, xử lý video, hình ảnh và trang ...

http://jsfiddle.net/c4j5pzua/

$('a[data-modal]').on('click',function(){
	var $page = $(this).data('page');
	var $image = $(this).data('image');
	var $video = $(this).data('video');
	var $title = $(this).data('title');
	var $size = $(this).data('size');
	$('#quickview .modal-title').text($title);
	if ($size) { $('#quickview .modal-dialog').addClass('modal-'+$size); }
	if ($image) {
		$('#quickview .modal-body').html('<div class="text-center"><img class="img-fluid" src="'+$image+'" alt="'+$title+'"></div>');
	} else if ($video) {
		$('#quickview .modal-body').html('<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/'+$video+'?autoplay=1" allowfullscreen></iframe></div>');
	}
	if ($page) {
		$('#quickview .modal-body').load($page,function(){
			$('#quickview').modal({show:true});
		});
	} else {
		$('#quickview').modal({show:true});
	}
	$('#quickview').on('hidden.bs.modal', function(){
		$('#quickview .modal-title').text('');
		$('#quickview .modal-body').html('');
		if ($size) { $('#quickview .modal-dialog').removeClass('modal-'+$size); }
	});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

<div class="container my-4">

<h3 class="mb-4">Bootstrap 4 Modal YouTube Videos, Images & Pages</h3>

<a href="javascript:;" class="btn btn-primary" data-modal data-video="zpOULjyy-n8" data-title="Video Title" data-size="xl">Video</a>

<a href="javascript:;" class="btn btn-primary" data-modal data-image="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-social-logo.png" data-title="Image Title" data-size="">Image</a>

<a href="javascript:;" class="btn btn-primary" data-modal data-page="https://getbootstrap.com" data-title="Page Title" data-size="lg">Page *</a>

<p class="mt-4">* Clicking this will break it, but it'll work using a local page!</p>

</div>

<div class="modal fade" id="quickview" tabindex="-1" role="dialog" aria-labelledby="quickview" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>


-3

$('#videoLink').click(function () {
    var src = 'https://www.youtube.com/embed/VI04yNch1hU;autoplay=1';
    // $('#introVideo').modal('show'); <-- remove this line
    $('#introVideo iframe').attr('src', src);
});

$('#introVideo button.close').on('hidden.bs.modal', function () {
    $('#introVideo iframe').removeAttr('src');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!-- triggering Link -->
<a id="videoLink" href="#0" class="video-hp" data-toggle="modal" data-target="#introVideo"><img src="img/someImage.jpg">toggle video</a>

<!-- Intro video -->
<div class="modal fade" id="introVideo" tabindex="-1" role="dialog" aria-labelledby="introductionVideo" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item allowfullscreen"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>


Ví dụ không chạy
Papa De Beau
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.