बूटस्ट्रैप का उपयोग करते हुए उत्तरदायी आइफ्रेम

Question

मैं बूटस्ट्रैप का उपयोग कर रहा हूं।

मेरे पास एक पाठ है जिसमें 2 या 3 iframes आधारित एम्बेड वीडियो हैं।

यह डेटा डेटाबेस से प्राप्त किया जाता है।

मैं इन 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 उत्तरदायी बनाने

— MP भगदड़

यह नोट करना अच्छा है कि बूटस्ट्रैप का कौन सा संस्करण है। मैंने इसका उत्तर दो विकल्पों के साथ दिया है।

— क्रिस्टीना

Answer 1

विकल्प 1

बूटस्ट्रैप 3.2 के साथ आप अपनी पसंद के उत्तरदायी-एम्बेडिंग आवरण में प्रत्येक आइफ्रेम लपेट सकते हैं:

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

यदि आप अपने आइफ्रेम को लपेटना नहीं चाहते हैं, तो आप FluidVids https://github.com/toddmotto/fluidosids का उपयोग कर सकते हैं । यहां देखें डेमो: 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, लेकिन मैं सोच रहा हूं कि क्या इन दिनों यह भी प्रासंगिक है ... फिर से धन्यवाद, कई (हैकी) समाधान करीब थे, लेकिन यह एकदम सही है!

— स्वेव्स

विकल्प 1 के लिए: डॉल्स के

— अलेक्जेंडर श्मिट

एक पहलू अनुपात का उपयोग करें और इसे काम पाने के लिए इसमें शामिल करें - >> <मेटा चारसेट = "utf-8"> <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-स्केल = 1"> <लिंक rel = "स्टाइलशीट" href = " maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css "> <script src = " maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/… >> और iframe टैग के भीतर -> फ्रेमबॉर्डर = "0" स्टाइल = "ओवरफ्लो: छिपा हुआ; अतिप्रवाह-एक्स: छिपा हुआ; अतिप्रवाह-य: छिपा हुआ; ऊंचाई: 100%; चौड़ाई: 100%; स्थिति: निरपेक्ष; शीर्ष: 0px; बायां: 0px; दाईं ओर: 0px; नीचे: 0px; "ऊँचाई =" 100% "चौड़ाई =" 100% "

— कृष्ण

Answer 2

कृपया, इसे देखें, मुझे आशा है कि यह मदद करेगा

<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-embed-iframe-twitter-bootstrap-3/

आपको इस कोड को अपनी मुख्य CSS फ़ाइल में कॉपी करना होगा,

.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%;कुछ अजीब सामान बनाते हैं

— Emidomenge

Answer 4

इसलिए, youtube इस प्रकार से iframe टैग देता है:

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

मेरे मामले में, मैंने इसे केवल चौड़ाई = "100%" में बदल दिया और बाकी को छोड़ दिया। यह सबसे सुरुचिपूर्ण समाधान नहीं है (आखिरकार, विभिन्न उपकरणों में आपको अजीब अनुपात मिलेगा) लेकिन वीडियो खुद को विकृत नहीं करता है, बस फ्रेम।

Comments

क्या यह उत्तरदायी है? यदि यह है, तो क्या यह पहलू अनुपात को बनाए रखेगा?

— Csaba Toth

अच्छा और सरल। मेरे लिए काम किया! धन्यवाद!

— जो

मेरे लिए भी काम करता है। सुझाई गई ऊँचाई (अपने मामले में 315) रखते हुए, लेकिन चौड़ाई को "100%" में बदल दें। तराजू स्तंभों के वर्गों के साथ जिम्मेदारी से काम करता है और अच्छी तरह से काम करता है।

— BAERUS

Answer 5

विकल्प 3

वर्तमान iframe अद्यतन करने के लिए

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

Answer 6

अगस्त 2020 के दौरान काम करना

इसे इस्तेमाल करो

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

एक पहलू अनुपात का उपयोग करें

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

iframe उपयोग विकल्पों के भीतर

 <iframe class="embed-responsive-item" src="..."
  frameborder="0"
    style="
      overflow: hidden;
      overflow-x: hidden;
      overflow-y: hidden;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
    "
    height="100%"
    width="100%"
  ></iframe>