एम्बेड्स

कस्मिन् अपि उपकरणे स्केल भवति इति आन्तरिकं अनुपातं निर्माय मातापितृविस्तारस्य आधारेण प्रतिक्रियाशीलं विडियो अथवा स्लाइडशो एम्बेड्स रचयन्तु।

विषये

नियमाः प्रत्यक्षतया <iframe>, <embed>, <video>, <object>तत्त्वेषु च प्रयुक्ताः भवन्ति; .embed-responsive-itemवैकल्पिकरूपेण यदा अन्येषां विशेषतानां कृते स्टाइलिंग् मेलयितुम् इच्छति तदा स्पष्टं वंशवर्गस्य उपयोगं कुर्वन्तु ।

समर्थक टिप् ! frameborder="0"भवता भवतः s मध्ये समावेशस्य आवश्यकता नास्ति <iframe>यतः वयं भवतः कृते तत् अधिलिखयामः।

उदाहरण

<iframe>एकं in a parent element with .embed-responsiveand an aspect ratio इत्यनेन सह किमपि एम्बेड् इव लपेटयन्तु । The .embed-responsive-itemisn't strictly required, परन्तु वयं तत् प्रोत्साहयामः।

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