एम्बेड करदा ऐ
कुसै बी डिवाइस पर स्केल करने आह् ले इक आंतरिक अनुपात बनाइयै माता-पिता दी चौड़ाई दे आधार उप्पर प्रतिक्रियाशील वीडियो जां स्लाइड शो एम्बेड बनाओ।
तकरीबन
नियम सीधे तौर पर <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;