एम्बेड

किसी भी डिवाइस पर स्केल करने वाला आंतरिक अनुपात बनाकर पैरेंट की चौड़ाई के आधार पर रिस्पॉन्सिव वीडियो या स्लाइड शो एम्बेड बनाएं।

के बारे में

नियम सीधे <iframe>, <embed>, <video>, और <object>तत्वों पर लागू होते हैं; वैकल्पिक रूप से एक स्पष्ट वंश वर्ग का उपयोग करें .embed-responsive-itemजब आप अन्य विशेषताओं के लिए स्टाइल से मेल खाना चाहते हैं।

प्रो टिप! frameborder="0"आपको अपने s में शामिल करने की आवश्यकता नहीं है <iframe>क्योंकि हम इसे आपके लिए ओवरराइड करते हैं।

उदाहरण

किसी भी एम्बेड को <iframe>मूल तत्व में .embed-responsiveऔर पक्षानुपात के साथ लपेटें। यह .embed-responsive-itemकड़ाई से आवश्यक नहीं है, लेकिन हम इसे प्रोत्साहित करते हैं।

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

अभिमुखता अनुपात

पहलू अनुपात को संशोधक वर्गों के साथ अनुकूलित किया जा सकता है। डिफ़ॉल्ट रूप से निम्नलिखित अनुपात वर्ग प्रदान किए जाते हैं:

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

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

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

के भीतर _variables.scss, आप उन पक्षानुपातों को बदल सकते हैं जिनका आप उपयोग करना चाहते हैं। यहाँ सूची का एक उदाहरण है $embed-responsive-aspect-ratios:

$embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (4 3),
  (1 1)
) !default;