বুটস্ট্র্যাপ ব্যবহার করে প্রতিক্রিয়াশীল iframe

Question

আমি বুটস্ট্র্যাপ ব্যবহার করছি।

আমার কাছে একটি পাঠ্য রয়েছে যা 2 বা 3 টি আইফ্রেমে ভিত্তিক এম্বেড ভিডিও ধারণ করে।

এই তথ্যটি ডাটাবেস থেকে আনা হয়েছে।

আমি কীভাবে এই iframes প্রতিক্রিয়াশীল করতে পারি?

উদাহরণ কোড:

<div class="row">

   <div class="col-lg-12 col-md-12 col-sm-12">

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe>

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe>


     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe> 

   </div>

</div>

এটি একটি গতিশীল ডেটা। আমি কীভাবে এটি প্রতিক্রিয়াশীল করতে পারি?

Comments

একটি iframe প্রতিক্রিয়াশীল তৈরি করার

— mpgn

বুটস্ট্র্যাপের কোন সংস্করণটি লক্ষ্য করা ভাল। আমি দুটি বিকল্প দিয়ে উত্তর দিয়েছি।

— ক্রিস্টিনা

Answer 1

বিকল্প 1

বুটস্ট্র্যাপ ৩.২ দিয়ে আপনি প্রতিটি আইফ্রেমে আপনার পছন্দের প্রতিক্রিয়াশীল-এম্বেড মোড়কে মোড়াতে পারেন:

http://getbootstrap.com/components/#responsive-embed

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

বিকল্প 2

আপনি যদি নিজের আইফ্রেমস মোড়াতে না চান তবে আপনি ফ্লুভিডস https://github.com/toddmotto/fluidvids ব্যবহার করতে পারেন । ডেমোটি এখানে দেখুন: http://toddmotto.com/labs/fluidvids/

   <!-- fluidvids.js -->
    <script src="js/fluidvids.js"></script>
    <script>
    fluidvids.init({
      selector: ['iframe'],
      players: ['www.youtube.com', 'player.vimeo.com']
    });
    </script>

Comments

এর উচ্চতা হ্রাস iframe। আমি থেকে পরিবর্তিত 100%করা 80%বর্গ .embed-responsive iframe। কিন্তু ফাঁকা জায়গা দিচ্ছে। ভিডিও পরে। এই স্থানটি কীভাবে এড়ানো যায়।

— সত্যএনটিভি

শেষ পর্যন্ত এটি নিখুঁতভাবে কাজ করে! ট্যাগগুলির <p>Your browser does not appear to support iframes</p>মধ্যে বাধ্যতামূলকটি অন্তর্ভুক্ত করা ভাল হতে পারে iframeতবে আমি ভাবছি যে এটি আজকের দিনেও প্রাসঙ্গিক কিনা ... আবার ধন্যবাদ, অনেকগুলি (হ্যাকি) সমাধান খুব কাছাকাছি ছিল, তবে এটি নিখুঁত!

— svenevs

বিকল্প 1 এ: দস্তাবেজের url getbootstrap.com/docs/3.3/components/# প্রতিক্রিয়াশীল- এম্বেডে

— আলেকজান্ডার শ্মিট

Answer 2

দয়া করে, এটি দেখুন, আমি আশা করি এটি সাহায্য করবে help

<div class="row">
 <iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
 </iframe>
</div>

Comments

ধন্যবাদ! উঘ অবশেষে কিছু সহজ যা আসলে কাজ করে।

— ফাতেমায়েজাহাহার রারিহিবউ

Answer 3

আমার জন্য যে দুর্দান্ত সমাধানটি দুর্দান্ত কাজ করেছে তা হ'ল আমি নীচের লিঙ্কটিতে খুঁজে পেয়েছি: https://bootstrapmaster.com/implement-responsive-youtube-vimeo-e એમ્બેડ-iframe-twitter-bootstrap-3/

আপনার করতে হবে: আপনার মূল সিএসএস ফাইলে এই কোডটি অনুলিপি করুন,

.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 60px; overflow: hidden;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

এবং তারপরে আপনার এমবেড করা ভিডিওতে রাখুন

<div class="responsive-video">
    <iframe ></iframe>
</div>

এটাই! এখন আপনি আপনার সাইটে প্রতিক্রিয়াশীল ভিডিও ব্যবহার করতে পারেন।

Comments

padding-bottom: 56.25%;কিছু অদ্ভুত জিনিস তৈরি করুন

— এমিডোমেন্জ

Answer 4

সুতরাং, ইউটিউব নীচে ইফ্র্যাম ট্যাগটি দেয়:

<iframe width="560" height="315" src="https://www.youtube.com/embed/2EIeUlvHAiM" frameborder="0" allowfullscreen></iframe>

আমার ক্ষেত্রে, আমি কেবল এটিকে প্রস্থ = "100%" এ পরিবর্তন করেছি এবং বাকিটি যেমন রেখেছি। এটি সবচেয়ে মার্জিত সমাধান নয় (সর্বোপরি, বিভিন্ন ডিভাইসে আপনি অদ্ভুত অনুপাত পাবেন) তবে ভিডিওটি নিজেই বিকৃত হয় না, কেবল ফ্রেম হয়।

Comments

এটা কি এইভাবে প্রতিক্রিয়াশীল? যদি এটি হয় তবে এটি অনুপাতের অনুপাত রাখবে?

— সিএসবা তোথ

সুন্দর এবং সহজ। আমার জন্য কাজ! ধন্যবাদ!

— জো

আমার জন্য কাজ করে। প্রস্তাবিত উচ্চতা রাখা (আপনার ক্ষেত্রে 315), তবে প্রস্থটি "100%" এ পরিবর্তন করুন। দায়বদ্ধতার সাথে স্কেল করে এবং বুটস্ট্র্যাপ কলাম ক্লাসগুলির সাথে ভাল কাজ করে।

— বেরুস

Answer 5

বিকল্প 3

বর্তমান iframe আপডেট করতে

$("iframe").wrap('<div class="embed-responsive embed-responsive-16by9"/>');
$("iframe").addClass('embed-responsive-item');