ایمبیڈز

والدین کی چوڑائی کی بنیاد پر ریسپانسیو ویڈیو یا سلائیڈ شو ایمبیڈز بنائیں ایک اندرونی تناسب بنا کر جو کسی بھی ڈیوائس پر اسکیل ہو۔

کے بارے میں

قواعد براہ راست <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;