एम्बेड करेला

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

बारे में

नियम सीधे <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;