Bootstrap 3 และ Youtube ใน Modal


157

ฉันพยายามใช้คุณสมบัติ Modal จาก Bootstrap 3 เพื่อแสดงวิดีโอ Youtube ของฉัน ใช้งานได้ แต่ฉันไม่สามารถคลิกที่ปุ่มใด ๆ ในวิดีโอ Youtube

ความช่วยเหลือเกี่ยวกับเรื่องนี้?

นี่คือรหัสของฉัน:

<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>

คำตอบ:


107

ฉันพบปัญหานี้ (หรือปัญหาที่ฉันพบและอธิบายที่https://github.com/twbs/bootstrap/issues/10489 ) ที่เกี่ยวข้องกับการแปลง CSS3 (การแปล) ใน.modal.fade .modal-dialogชั้นเรียน

ใน bootstrap.css คุณจะพบบรรทัดที่แสดงด้านล่าง:

.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);
}

การแทนที่บรรทัดเหล่านี้ด้วยรายการต่อไปนี้จะแสดงภาพยนตร์อย่างถูกต้อง (ในกรณีของฉัน):

.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
นี่ไม่ควรเป็นคำตอบที่ยอมรับได้ ต้องไม่แก้ไขไฟล์ css ต้นฉบับ
emix

38

ฉันได้รวมสคริปต์โมดอลวิดีโอ YouTube แบบไดนามิก html / jQuery ที่เล่นวิดีโอ YouTube โดยอัตโนมัติเมื่อมีการคลิกทริกเกอร์ (ลิงก์) ทริกเกอร์จะมีลิงก์ที่จะเล่นด้วย สคริปต์จะค้นหาการเรียก modal bootstrap ดั้งเดิมและเปิดแม่แบบ modal ที่ใช้ร่วมกันกับข้อมูลจากทริกเกอร์ ดูด้านล่างและแจ้งให้เราทราบว่าคุณคิดอย่างไร ฉันชอบที่จะได้ยินความคิด ...

HTML MODAL TRIGGER:

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

เทมเพลตวิดีโอ HTML แบบ 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>

ฟังก์ชั่น JQUERY:

//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);
    });   
  });
}

ฟังก์ชั่นการโทร:

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

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


8
วิธีนี้จะผูกเหตุการณ์ไว้ที่ปุ่มปิดทุกครั้งที่คุณเปิดคำกริยาและคุณควรใช้hidden.bs.modalเหตุการณ์เป็นวิธีการปิดวิดีโอเนื่องจากผู้ใช้สามารถทำสิ่งอื่น ๆ เพื่อปิดคำกริยา (เช่นคลิกที่ด้านนอก)
เอียนคลาร์ก

การเล่นอัตโนมัติผิดเงื่อนไข Youtube API เพิ่งได้รับแอปที่ปฏิเสธโดยใช้ webview ในตลาดแอพ Android ...
giorgio79

ฟังดูเหมือนแอพของคุณอาจมีบางอย่างผิดปกติ นี่คือเอกสารของ YouTube developers.google.com/youtube/player_parameters support.google.com/youtube/answer/…
jeremykenedy

1
+1 ดูเหมือนว่าเงินทุนของตัวเองจะหมายถึงคำตอบของคุณ: getbootstrap.com/docs/4.3/components/modal/...
PhilMarc

19

ฉันมีหนึ่งเคล็ดลับสำหรับคุณ!

ฉันจะใช้:

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

แทน:

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

เนื่องจากคุณสามารถปิดคำกริยาได้โดยไม่ต้องใช้ปุ่มดังนั้นในรหัสนี้จะมีการลบวิดีโอทุกครั้งที่ modal จะซ่อน


ได้อย่างรวดเร็วก่อนใช้งานได้ แต่ถ้าคุณต้องการที่จะเปิดกิริยานี้อีกครั้ง คุณทำไม่ได้เพราะคุณลบไปแล้ว'src'
kanlukasz

17

พบสิ่งนี้ในเธรดอื่นและใช้งานได้ดีบนเดสก์ท็อปและมือถือ - ซึ่งเป็นสิ่งที่ไม่เป็นความจริงสำหรับโซลูชันอื่น ๆ เพิ่มสคริปต์นี้ในตอนท้ายของหน้าของคุณ:

<!--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>   

รหัสนี้ใช้ได้สำหรับฉัน ง่ายและมีประสิทธิภาพ! ขอบคุณ!
Raimundo Baravaglio

13

นี่คือวิธีแก้ไขปัญหาอื่น: บังคับวิดีโอ youtube HTML5

เพียงเพิ่ม? html5 = 1 ไปยังแอตทริบิวต์แหล่งที่มาของ iframe ดังนี้:

<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>

พารามิเตอร์ html5 = 1 ไม่ได้ทำอะไรเลย (อีกต่อไป) ในตอนนี้ (โปรดทราบว่าไม่มีอยู่ในรายการที่developers.google.com/youtube/player_parameters )
Adarsh ​​Madrecha

5

ลองใช้วิธีนี้สำหรับ 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>

เยี่ยมชม: https://parrot-tutorial.com/run_code.php?snippet=bs4_modal_youtube


4

หากคุณไม่ต้องการแก้ไข bootstrap CSS หรือทั้งหมดข้างต้นไม่ได้ช่วยคุณเลย (เช่นในกรณีของฉัน) มีวิธีแก้ไขที่ง่ายในการทำให้วิดีโอทำงานใน modal บน Firefox

คุณเพียงแค่ลบคลาส "จาง" ออกจาก modal และเมื่อเปิดคลาส "in" ด้วย:

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

4

ฉันได้แก้ไขมันใน wordpress template:

$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>

2

Bootstrap มีฟังก์ชั่นการทำงานแบบป็อปอัพแบบไม่เป็นทางการ

<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 ... คุณสามารถโพสต์เอกสาร HTML ทั้งหมดของคุณและเบราว์เซอร์ / รุ่นที่คุณใช้อยู่ได้หรือไม่?

ฉันสร้างหน้าของคุณขึ้นใหม่และทดสอบใน 3 เบราว์เซอร์ (Chrome, FF, IE8) ฉันสามารถหยุดและเริ่มตัวอย่าง WDS4 ที่ยอดเยี่ยมได้โดยไม่มีปัญหาใด ๆ นี่คือรหัสของฉัน:

<!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>

คุณสามารถลองเพิ่มดัชนี Z ของผู้เล่นโมดัลของคุณให้สูงขึ้นได้ไหม?

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


ฉันลองใช้รหัสของคุณแล้วแต่ไม่ได้ผล ฉันไม่สามารถคลิกที่ปุ่มใด ๆ ในวิดีโอ (หยุดชั่วคราว, ระดับเสียง, คุณภาพและอื่น ๆ ) คุณเข้าใจหรือไม่ว่าฉันไม่สามารถใช้ปุ่ม YOUTUBE ได้? ฉันกำลังดูอยู่ใน Firefox - คุณใช้ jQuery เวอร์ชั่นใดอยู่ ฉันใช้ 1.10.1 - คุณใช้ Bootstrap 3 อยู่หรือเปล่า
NitroMedia

ดำเนินการทดสอบของฉัน: ไม่ทำงานใน Firefox ทำงานใน Chrome ทำงานใน Safari
NitroMedia

ดังนั้นฉันใช้รหัสของคุณทดสอบได้ทุกที่และใช้งานได้ทุกที่ยกเว้น Firefox บน Mac เมื่อฉันวางเมาส์ปุ่มสีจะเปลี่ยน แต่ฉันไม่สามารถคลิกได้ บนพีซีหน้าจอจะเป็นสีดำและวิดีโอกำลังเล่นอยู่ มันทำให้ฉันบ้า! ฉันพยายามเรียกใช้ firefox ด้วยเซฟโหมดล้างแคชของฉันไม่มีอะไรทำงาน
NitroMedia

ฉันพบปัญหาเดียวกัน สำหรับ Firefox สำหรับ Ubuntu 23.0 แต่ฉันได้รับข้อผิดพลาด TypeError: ค่าไม่ใช่วัตถุ s.ytimg.com/yts/jsbin/www-embed-player-vflwWlnaY.js (บรรทัด 220) ในโครเมี่ยมรหัสของคุณทำงาน
Bass Jobsen

Mmhhh .. ฉันสร้างมันขึ้นใหม่บนเครื่อง mac และพยายามดาวน์โหลดรหัสวิดีโอ ให้ฉันผลักดันมันไปยังเซิร์ฟเวอร์ของฉันและดูว่าข้อผิดพลาดในเครื่อง
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

ใช้ $('#introVideo').modal('show'); ความขัดแย้งกับการบูตที่เหมาะสมเรียก เมื่อคุณคลิกที่ลิงค์ที่เปิด Modal มันจะปิดทันทีหลังจากทำแอนิเมชั่นจางหายไป เพียงแค่ลบ$('#introVideo').modal('show'); (โดยใช้ bootstrap v3.3.2)

นี่คือรหัสของฉัน:

<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

คำตอบของ user3084135 นั้นใช้ได้ดีสำหรับฉัน แต่ฉันก็จำเป็นต้องรวม:

  1. แท็ก "วิดีโอ" สำหรับวิดีโอที่โฮสต์ในเครื่องรวมถึงแท็ก "iframe" สำหรับวิดีโอที่โฮสต์ภายนอก
  2. ตรวจสอบให้แน่ใจว่าแหล่งที่มานั้นถูกลบออกไปอย่างไรก็ตามโมดัลถูกไล่ออก
  3. โซลูชันทำงานในการออกแบบที่ตอบสนองต่อ Bootstrap
  4. วิดีโอทั้งหมดเล่นอัตโนมัติเมื่อเปิดใช้งานเป็นกิริยาช่วย
  5. สามารถปรับได้หลายแบบ

โซลูชันสำเร็จรูปของฉันมีลักษณะเช่นนี้:

ปุ่มทริกเกอร์แบบโมดูล

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

แอตทริบิวต์ data-frame อาจเป็น "iframe" หรือ "video" เพื่อแสดงถึงประเภทแท็กที่เหมาะสม: iframe สำหรับ vids ภายนอกวิดีโอสำหรับโฮสต์ในเครื่อง

กล่องวิดีโอตอบโต้ของ BOOTSTRAP

iFrame:

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

วิดีโอ:

<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>

สิ่งเหล่านี้ทั้งสองอยู่ในมาตรฐาน mods ตอบสนองการบูต Bootstrap

สคริป JQUERY

<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>

เนื่องจากการเล่นอัตโนมัติทำงานต่างกันกับ iframe และแท็กวิดีโอจึงมีการใช้เงื่อนไขเพื่อจัดการกับแต่ละรายการ เพื่อให้สามารถปรับได้หลายตัวเลือกตัวแทนจะใช้เพื่อระบุพวกเขา (portfolioModal1-6 ในกรณีของฉัน)


0

ฉันมีปัญหาเดียวกันนี้ - ฉันเพิ่งเพิ่มลิงค์ cdn แบบอักษรที่ยอดเยี่ยม - แสดงความคิดเห็น bootstrap หนึ่งด้านล่างแก้ไขปัญหาของฉัน .. ไม่ได้แก้ปัญหาจริงๆเพราะตัวอักษรที่ยอดเยี่ยมยังคงทำงานอยู่ -

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

0

ตกลง. ฉันพบวิธีแก้ปัญหา

                <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

สำหรับ Bootstrap 4 ซึ่งจัดการวิดีโอภาพและหน้า ...

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>


ตัวอย่างไม่ทำงาน
Papa De Beau
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.