मोडल में बूटस्ट्रैप 3 और यूट्यूब


157

मैं अपने Youtube वीडियो को दिखाने के लिए बूटस्ट्रैप 3 से मोडल फीचर का उपयोग करने की कोशिश कर रहा हूं। यह काम करता है, लेकिन मैं 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

मुझे कक्षा पर CSS3 परिवर्तन (अनुवाद) से संबंधित https://github.com/twbs/bootstrap/issues/10489 पर यह समस्या (या मुझे जो समस्या मिली और वर्णित है ) मिली .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
यह स्वीकृत उत्तर नहीं होना चाहिए। स्रोत सीएसएस फ़ाइलों को संपादित नहीं करना चाहिए।
एमिक्स

38

मैंने इस html / jQuery डायनामिक YouTube वीडियो मोडल स्क्रिप्ट को एक साथ रखा है कि जब ट्रिगर (लिंक) पर क्लिक किया जाता है तो ऑटो YouTube वीडियो चलाता है, ट्रिगर में खेलने के लिए लिंक भी होता है। स्क्रिप्ट में मूल बूटस्ट्रैप मोडल कॉल मिलेगा और ट्रिगर से डेटा के साथ साझा किए गए मोडल टेम्पलेट को खोलना होगा। नीचे देखें और मुझे बताएं कि आप क्या सोचते हैं। मुझे विचार सुनना अच्छा लगेगा ...

HTML मोडल ट्राइगर:

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

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>

जंकरी समारोह:

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

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


8
यह हर बार जब आप मोडल को खोलते हैं, तब एक बटन को बंद कर देता है, और आपको hidden.bs.modalवीडियो को बंद करने के साधन के रूप में भी इस घटना का उपयोग करना चाहिए , क्योंकि उपयोगकर्ता मोडल को बंद करने के लिए अन्य काम कर सकता है (जैसे इसके बाहर क्लिक करें)।
इयान क्लार्क

ऑटोप्ले Youtube API शर्तों के विरुद्ध है। बस एंड्रॉइड ऐप मार्केटप्लेस में वेबव्यू का उपयोग करके एक ऐप को खारिज कर दिया गया ...
giorgio79

लगता है कि आपके ऐप में कुछ और गड़बड़ हो सकती है। यहाँ YouTube का प्रलेखन है। Developers.google.com/youtube/player_parameters support.google.com/youtube/answer/…
jeremykenedy

1
+1 ऐसा लगता है कि बूटस्ट्रैप खुद ही आपके उत्तर की बात कर रहा है: getbootstrap.com/docs/4.3/compenders/modal/…
PhilMarc

19

मेरे पास आपके लिए एक टिप है!

मै इस्तेमाल करूंगा:

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

के बजाय:

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

क्योंकि आप बटन के बिना भी मोडल को बंद कर सकते हैं, इसलिए इस कोड के साथ यह वीडियो को हर बार हटा देगा जब मोडल छिप जाएगा।


पहली नज़र में यह काम करता है, लेकिन क्या होगा अगर आप इस मोडल को फिर से खोलना चाहते हैं। आप इसलिए नहीं हटा सकते हैं'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>   

यह कोड मेरे लिए काम करता है। सरल और कुशल! धन्यवाद!
रायमुंडो बारवाग्लियो

13

यहां एक और समाधान है: बल एचटीएमएल 5 यूट्यूब वीडियो

बस जोड़ें; html5 = 1 iframe पर स्रोत विशेषता, इस तरह से:

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

पैरामीटर html5 = 1 अब (अब) कुछ भी नहीं करता है। (ध्यान दें कि यह Developers.google.com/youtube/player_parameters पर भी सूचीबद्ध नहीं है। )
आदर्श मादरेचा

5

बूटस्ट्रैप 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

यदि आप बूटस्ट्रैप सीएसएस को संपादित नहीं करना चाहते हैं या उपरोक्त सभी आपकी मदद नहीं करते हैं (जैसे कि मेरे मामले में), तो फ़ायरफ़ॉक्स पर एक मोडल में वीडियो को चलाने के लिए एक आसान निर्धारण है।

आपको केवल "फीका" वर्ग को मोडल से निकालने की आवश्यकता है और जैसे ही वह "इन" क्लास खोलता है, भी:

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

4

मैंने इसे वर्डप्रेस टेम्पलेट पर हल किया है:

$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

बूटस्ट्रैप बॉक्स से बाहर मोडल पॉप-अप कार्यक्षमता प्रदान करता है।

<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-Index को लाने की कोशिश कर सकते हैं?

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


मैंने आपके कोड की कोशिश की, लेकिन यह काम नहीं किया। मैं वीडियो के किसी भी बटन पर क्लिक नहीं कर सकता (रोकें, ध्वनि की मात्रा, गुणवत्ता, आदि)। क्या आप समझते हैं कि मैं किसी भी YOUTUBE बटन का उपयोग नहीं कर सकता हूँ? मैं इसे फ़ायरफ़ॉक्स में देख रहा हूँ। - आप किस संस्करण का उपयोग कर रहे हैं? मैं 1.10.1 का उपयोग कर रहा हूं - आप बूटस्ट्रैप 3 का उपयोग कर रहे थे?
नाइट्रोमीडिया

मेरे परीक्षण जारी रखें: फ़ायरफ़ॉक्स में फ़ायरफ़ॉक्स में काम न करें क्रोम में सफारी में काम करें
नाइट्रोमीडिया

इसलिए मैं आपके कोड का उपयोग करता हूं, इसे हर जगह परीक्षण करता हूं और यह फ़ायरफ़ॉक्स को छोड़कर हर जगह काम करता है। मैक पर, जब मैं एक बटन रोलओवर करता हूं, तो रंग बदल जाता है लेकिन मैं उन पर क्लिक नहीं कर सकता। पीसी पर, स्क्रीन काले रहें और वीडियो चल रहा है। ये मुझे पागल कर रहा है! मैंने सुरक्षित मोड के साथ फ़ायरफ़ॉक्स चलाने की कोशिश की, मेरा कैश खाली कर दिया, कुछ भी काम नहीं किया।
नाइट्रोमेडिया

मुझे वही समस्या मिली। Ubuntu 23.0 के लिए फ़ायरफ़ॉक्स के लिए। लेकिन मुझे एक त्रुटि मिली TypeError: मान एक वस्तु नहीं। s.ytimg.com/yts/jsbin/www-embed-player-vflwWlnaY.js (लाइन 220)। क्रोम में आपका कोड काम करता है।
बैस जॉसेन

Mmhhh .. मैंने इसे अपने मैक पर स्थानीय रूप से फिर से बनाया है, और यह वीडियो आईडी डाउनलोड करने की कोशिश करता है। मुझे इसे अपने सर्वर पर धकेलने दें और देखें कि क्या यह एक स्थानीय बग है।
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'); बूटस्ट्रैप उचित ट्रिगर के साथ संघर्ष का उपयोग करना । जब आप उस लिंक पर क्लिक करते हैं जो मोडल को खोलता है तो यह फीका एनीमेशन पूरा करने के बाद बंद हो जाएगा। बस हटा दो$('#introVideo').modal('show'); (बूटस्ट्रैप 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. समाधान बूटस्ट्रैप उत्तरदायी डिज़ाइन में काम करता है
  4. मोडल ओपन पर सभी वीडियो ऑटो-प्ले
  5. कई मोडल संभव हैं

मेरा तैयार समाधान इस तरह दिखता है:

मोडल ट्राइगर बटन

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

डेटा-फ़्रेम विशेषता उपयुक्त टैग प्रकार को प्रतिबिंबित करने के लिए "iframe" या "video" हो सकती है: बाहरी vids के लिए iframe, स्थानीय-होस्ट के लिए वीडियो।

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>

ये दोनों मानक बूटस्ट्रैप उत्तरदायी मोडल divs के भीतर रहते हैं।

जैकी SCRIPT

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

चूंकि ऑटोप्ले आईफ्रेम और वीडियो टैग के साथ अलग तरह से काम करता है, इसलिए प्रत्येक के साथ काम करने के लिए एक सशर्त का उपयोग किया जाता है। कई मोडल्स की अनुमति देने के लिए, उन्हें पहचानने के लिए एक वाइल्डकार्ड चयनकर्ता का उपयोग किया जाता है (मेरे मामले में पोर्टफोलियोमॉडल1-6)।


0

मेरे पास यही मुद्दा था - मैंने अभी-अभी फ़ॉन्ट-भयानक cdn लिंक जोड़े थे - एक बूटस्ट्रैप को नीचे टिप्पणी करते हुए मेरे मुद्दे को हल किया .. लेकिन वास्तव में इसे फ़ॉन्ट के रूप में समस्या का निवारण नहीं किया -

<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

बूटस्ट्रैप 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>


उदाहरण नहीं चलता
पापा डी ब्यू
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.