বুটস্ট্র্যাপ 3 এবং ইউটিউব মডেল


157

আমি আমার ইউটিউব ভিডিওটি দেখানোর জন্য বুটস্ট্র্যাপ 3 থেকে মডেল বৈশিষ্ট্যটি ব্যবহার করার চেষ্টা করছি। এটি কাজ করে তবে আমি ইউটিউব ভিডিওতে কোনও বোতামে ক্লিক করতে পারি না।

এই কোন সাহায্য?

আমার কোডটি এখানে:

<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

বুটস্ট্র্যাপ সিএসএসে আপনি নীচে প্রদর্শিত লাইনগুলি দেখতে পাবেন:

.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

আমি এই এইচটিএমএল / জিকিউরি ডায়নামিক ইউটিউব ভিডিও মডেল স্ক্রিপ্টটি একসাথে রেখেছি যে ট্রিগার (লিঙ্ক) ক্লিক করা হলে অটো ইউটিউব ভিডিও চালায়, ট্রিগারটিতে প্লে করার জন্য লিঙ্কটিও রয়েছে। স্ক্রিপ্টটি নেটিভ বুটস্ট্র্যাপ মডেল কলটি সন্ধান করবে এবং ট্রিগার থেকে ডেটা সহ ভাগ করা মডেল টেম্পলেট খুলবে। নীচে দেখুন এবং আপনি কী ভাবছেন তা আমাকে জানান। আমি চিন্তা শুনতে ভাল লাগবে ...

এইচটিএমএল মডেল ট্রিগার:

 <a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s" >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="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();
});

সংক্ষিপ্ত বিবরণ: http://jsfiddle.net/jeremykenedy/h8daS/1/


8
এটি প্রতিবার আপনি যখন মডেলটি খোলেন তখন বন্ধ ইভেন্ট বোতামে একটি ইভেন্টকে আবদ্ধ করে তোলে এবং hidden.bs.modalভিডিওটি বন্ধ করার উপায় হিসাবে আপনার ইভেন্টটি ব্যবহার করা উচিত , কারণ ব্যবহারকারী মডেলটি বন্ধ করতে অন্যান্য কাজ করতে পারেন (যেমন, এর বাইরে ক্লিক করুন)।
ইয়ান ক্লার্ক

অটোপ্লে ইউটিউব এপিআই শর্তাদির বিপরীতে।
সবেমাত্র

আপনার অ্যাপ্লিকেশন এর মতো শব্দগুলির সাথে এটিতে অন্য কিছু হতে পারে। এখানে ইউটিউবের ডকুমেন্টেশন রয়েছে। বিকাশকারীরা.
com

1
+1 দেখে মনে হচ্ছে বুটস্ট্র্যাপ নিজেই আপনার উত্তরটির উল্লেখ করছে: getbootstrap.com/docs/4.3/components/modal/…
ফিলমার্ক

19

আমি আপনার জন্য একটি টিপ আছে!

আমি ব্যবহার করব:

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

পরিবর্তে:

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

কারণ আপনি বোতামটি ছাড়া মডেলটিও বন্ধ করতে পারেন, সুতরাং এই কোডটির সাহায্যে এটি প্রতিবার মোডালটি আড়াল করে ভিডিও সরিয়ে ফেলবে।


প্রথম নজরে এটি কাজ করে তবে আপনি যদি এই মডেলটি আবার খুলতে চান তবে কী হবে। আপনি মুছে ফেলার কারণে আপনি পারবেন না'src'
কানলুকাসz

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

এখানে আরও একটি সমাধান রয়েছে: জোর HTML5 ইউটিউব ভিডিও

এইফ্রেমে উত্স বৈশিষ্ট্যে কেবল এইচটিএমএল 5 = 1 যুক্ত করুন:

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

এইচটিএমএল 5 = 1 প্যারামিটারটি এখন আর কিছু করে না। (নোট করুন এটি এমনকি ডেভেলপারসগুলিতে.
com/youtube/player_paraters

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>

4

এই ব্যবহার করে দেখুন বুটস্ট্র্যাপ জন্য 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


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

এমএমএইচ ... আপনি কি আপনার সম্পূর্ণ এইচটিএমএল ডকটি পোস্ট করতে পারেন এবং কোন ব্রাউজার / সংস্করণ ব্যবহার করছেন?

আমি আপনার পৃষ্ঠাটি পুনরায় তৈরি করেছি এবং 3 ব্রাউজারে পরীক্ষা করেছি (ক্রোম, এফএফ, আই 8)। আমি কোনও সমস্যা ছাড়াই দুর্দান্ত এবং ডাব্লুডিএস 4 ট্রেলারটি থামাতে এবং শুরু করতে সক্ষম হয়েছি। আমার কোডটি এখানে:

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

আপনি আপনার মোডাল প্লেয়ারের জেড-ইনডেক্সকে স্ট্যাকের চেয়ে বেশি আনতে চেষ্টা করতে পারেন?

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


আমি আপনার কোড চেষ্টা করেছিলাম, কিন্তু এটি কার্যকর হয়নি। আমি ভিডিওর কোনও বাটনে ক্লিক করতে পারি না (বিরতি, শব্দ ভলিউম, গুণমান ইত্যাদি)। আপনি কি বুঝতে পেরেছিলেন যে আমি কোনও ইউটিউব বোতাম ব্যবহার করতে পারি না? আমি এটি ফায়ারফক্সে দেখছি। - আপনি jquery এর কোন সংস্করণ ব্যবহার করছেন? আমি 1.10.1 ব্যবহার করছি - আপনি বুটস্ট্র্যাপ 3 ব্যবহার করছিলেন?
নাইট্রোমিডিয়া

আমার পরীক্ষা চালিয়ে যান: ফায়ারফক্সে কাজ করবেন না ক্রোমের
ওয়ার্কে

সুতরাং আমি আপনার কোডটি ব্যবহার করি, এটি সর্বত্র পরীক্ষা করে ফায়ারফক্স ছাড়া অন্য কোথাও এটি কাজ করে। ম্যাক-এ, আমি যখন একটি বোতাম রোলওভার করি তখন রঙ পরিবর্তন হয় তবে আমি সেগুলিতে ক্লিক করতে পারি না। পিসিতে, স্ক্রিনটি কালো থাকুন এবং ভিডিও প্লে হচ্ছে। এটা আমার পাগল ড্রাইভ! আমি নিরাপদ মোডে ফায়ারফক্স চালানোর চেষ্টা করেছি, আমার ক্যাশে খালি করেছি, কিছুই কাজ করছে না।
নাইট্রোমিডিয়া

আমি একই সমস্যা খুঁজে পেয়েছি। উবুন্টু 23.0 এর জন্য ফায়ারফক্সের জন্য। তবে আমি একটি ত্রুটি পেয়েছি TypeError: কোনও বস্তুর মূল্য নয়। s.ytimg.com/yts/jsbin/www-e એમ્બેડ-player-vflwWlnaY.js (লাইন 220)। ক্রোমে আপনার কোড কাজ করে।
বাস জোবসেন

এমএমএইচএইচ .. আমি স্থানীয়ভাবে এটি আমার ম্যাকটিতে পুনরায় তৈরি করেছি এবং এটি ভিডিও আইডি ডাউনলোড করার চেষ্টা করে। আমাকে এটি আমার সার্ভারে চাপ দিন এবং দেখুন যে এটি কোনও স্থানীয় বাগ।
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

ব্যবহারকারীর 3084135 এর উত্তরটি আমার পক্ষে একটি ভিত্তি হিসাবে ভাল কাজ করেছে, তবে আমারও অন্তর্ভুক্ত করা দরকার:

  1. স্থানীয়ভাবে-হোস্ট করা ভিডিওর জন্য "ভিডিও" ট্যাগ পাশাপাশি বহিরাগত-হোস্ট করা ভিডিওর জন্য "iframe" ট্যাগ
  2. মডেলটি বরখাস্ত হলেও উত্সটি সরানো হয়েছে তা নিশ্চিত করুন
  3. সমাধানটি বুটস্ট্র্যাপের প্রতিক্রিয়াশীল ডিজাইনে কাজ করেছিল
  4. সমস্ত ভিডিও স্বয়ংক্রিয়ভাবে মোডাল খোলে play
  5. একাধিক মডেল সম্ভব

আমার সমাপ্ত সমাধানটি এর মতো দেখাচ্ছে:

মোডাল ট্রিগার বাটন

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

তথ্য-ফ্রেমের বৈশিষ্ট্যটি "আইফ্রেমে" বা "ভিডিও" হতে পারে উপযুক্ত ট্যাগ প্রকারটি প্রতিফলিত করতে: বহিরাগত vids জন্য 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>

এই উভয়ই স্ট্যান্ডার্ড বুটস্ট্র্যাপ প্রতিক্রিয়াশীল মডেল ডিভের মধ্যে থাকে।

জ্যাকুরি স্ক্রিপ্ট

<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

আমার এই একই সমস্যাটি ছিল - আমি সবেমাত্র ফন্ট-অসাধারণ সিডিএন লিঙ্কগুলি যুক্ত করেছি - নীচের বুটস্ট্র্যাপের মন্তব্যটি আমার সমস্যার সমাধান করেছে .. হরফ হ'ল ফন্টটি এখনও কাজ করার কারণে এটি সত্যিই সমস্যার সমাধান করতে পারে নি -

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


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.