உட்பொதிக்கிறது

எந்தவொரு சாதனத்திலும் அளவிடக்கூடிய உள்ளார்ந்த விகிதத்தை உருவாக்குவதன் மூலம் பெற்றோரின் அகலத்தின் அடிப்படையில் பதிலளிக்கக்கூடிய வீடியோ அல்லது ஸ்லைடுஷோ உட்பொதிகளை உருவாக்கவும்.

பற்றி

விதிகள் நேரடியாக <iframe>, <embed>, <video>, மற்றும் <object>உறுப்புகளுக்குப் பயன்படுத்தப்படுகின்றன; .embed-responsive-itemநீங்கள் மற்ற பண்புக்கூறுகளுக்கு ஸ்டைலிங் பொருத்த விரும்பினால் வெளிப்படையான சந்ததி வகுப்பைப் பயன்படுத்தவும்.

சார்பு உதவிக்குறிப்பு! உங்களுக்காக நாங்கள் மேலெழுதுவதால் frameborder="0", உங்கள் களில் நீங்கள் சேர்க்க வேண்டியதில்லை .<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;