މައިގަނޑު ކޮންޓެންޓަށް ސްކިޕް ކުރާށެވެ ޑޮކްސް ނެވިގޭޝަނަށް ސްކިޕް ކުރާށެވެ
Check
in English

ރޭޝިއޯސް އެވެ

އެލިމެންޓެއް ތިމާ އިޚްތިޔާރުކުރާ އެސްޕެކްޓް ރޭޝިއޯ ބެލެހެއްޓޭނެ ގޮތަށް ހެދުމަށްޓަކައި ޖެނެރޭޓް ކުރެވިފައިވާ ސޫޑޯ އެލިމެންޓްތައް ބޭނުން ކުރާށެވެ. ބެލެނިވެރިޔާގެ ފުޅާމިނަށް ބަލައިގެން ވީޑިއޯ ނުވަތަ ސްލައިޑްޝޯ އެންބެޑްސް ރެސްޕޮންސިވްކޮށް ހެންޑްލް ކުރުމަށް ފުރިހަމަ އެވެ.

ގުޅިގެން

<iframe><embed><video>s، އަދި s ފަދަ ބޭރު ކޮންޓެންޓްގެ އެސްޕެކްޓް ރޭޝިއޯތައް މެނޭޖްކުރުމަށް ރޭޝިއޯ ހެލްޕަރ ބޭނުން ކުރާށެވެ <object>. މި ހެލްޕަރުން ކޮންމެ ސްޓޭންޑަރޑް އެޗްޓީއެމްއެލް ޗައިލްޑް އެލިމެންޓެއްގައި ވެސް (އެބަހީ، a <div>ނުވަތަ <img>) ބޭނުންކުރެވިދާނެއެވެ. ސްޓައިލްތައް ބެލެނިވެރި .ratioކްލާހުން ސީދާ ކުއްޖާއަށް އަމަލުކުރެއެވެ.

އެސްޕެކްޓް ރޭޝިއޯތައް ސާސް މެޕެއްގައި ޑިކްލެއާކޮށް ކޮންމެ ކްލާހެއްގައި ސީއެސްއެސް ވެރިއޭބަލް މެދުވެރިކޮށް ހިމަނާފައިވާއިރު، މިއީ ކަސްޓަމް އެސްޕެކްޓް ރޭޝިއޯތައް ވެސް ހުއްދަކޮށްދޭ ކަމެކެވެ .

ޕްރޯ ޓިޕް! ޔޫ ޑޯންޓް ނީޑް frameborder="0"އޮން ޔޫއާރ <iframe>އެސް އެސް ވީ އޯވަރރައިޑް ދަ ފޯ ޔޫ އިން ރީބޫޓް .

މިސާލު

އެއްވެސް އެންބެޑެއް، ފަދައިން <iframe>، ޕޭރެންޓް އެލިމެންޓެއްގައި .ratioއަދި އެސްޕެކްޓް ރޭޝިއޯ ކްލާހެއްގައި އޮޅާލާށެވެ. ވަގުތީ ޗައިލްޑް އެލިމެންޓް އޮޓޮމެޓިކުން ސައިޒް ކުރެވެނީ އަޅުގަނޑުމެންގެ ޔުނިވާސަލް ސެލެކްޓަރ ގެ ސަބަބުންނެވެ .ratio > *.

html އެވެ
<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

އެސްޕެކްޓް ރޭޝިއޯސް އެވެ

އެސްޕެކްޓް ރޭޝިއޯތައް މޮޑިފައި ކްލާސްތަކާއެކު ކަސްޓަމައިޒް ކުރެވިދާނެއެވެ. ބައި ޑިފޯލްޓްކޮށް ތިރީގައިވާ ރޭޝިއޯ ކްލާސްތައް ފޯރުކޮށްދެއެވެ.

1x1 އެވެ
4x3 އެވެ
16x9 އެވެ
21x9 އެވެ
html އެވެ
<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

ކަސްޓަމް ރޭޝިއޯތަކެވެ

ކޮންމެ .ratio-*ކްލާހެއްގައި ވެސް ސެލެކްޓަރުގައި ސީއެސްއެސް ކަސްޓަމް ޕްރޮޕަޓީ (ނުވަތަ ސީއެސްއެސް ވެރިއޭބަލް) އެއް ހިމެނެއެވެ. މި ސީއެސްއެސް ވެރިއޭބަލް އޯވަރރައިޑްކޮށްގެން ކަސްޓަމް އެސްޕެކްޓް ރޭޝިއޯތައް އުފެއްދުމަށް ފްލައިގައި ތިމާގެ ފަރާތުން ކޮންމެވެސް އަވަސް ހިސާބަކުން ކުރެވިދާނެއެވެ.

މިސާލަކަށް 2x1 އެސްޕެކްޓް ރޭޝިއޯ އުފެއްދުމަށްޓަކައި، އަށް ސެޓް --bs-aspect-ratio: 50%ކުރާށެވެ .ratio.

2x1 އެވެ
html އެވެ
<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

މި ސީއެސްއެސް ވެރިއޭބަލްގެ ސަބަބުން ބްރޭކްޕޮއިންޓްތަކުގެ ތެރެއިން އެސްޕެކްޓް ރޭޝިއޯ ބަދަލުކުރުމަށް ފަސޭހަވެގެންދެއެވެ. ތިރީގައި މިވަނީ ފެށުމަށް 4x3 ނަމަވެސް މީޑިއަމް ބްރޭކްޕޮއިންޓްގައި ކަސްޓަމް 2x1 އަކަށް ބަދަލުވެއެވެ.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}
4x3، ދެން 2x1 އެވެ
html އެވެ
<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

ސާސް މެޕް

ގެ ތެރޭގައި _variables.scssބޭނުންކުރަން ބޭނުންވާ އެސްޕެކްޓް ރޭޝިއޯތައް ބަދަލުކުރެވޭނެއެވެ. މިއޮތީ އަޅުގަނޑުމެންގެ ޑިފޯލްޓް $ratio-aspect-ratiosމެޕް. ތިމާ ބޭނުންވާ ގޮތަށް މެޕް ބަދަލުކޮށް، ތިމާގެ ސާސް އަލުން ކޮމްޕައިލްކޮށް އެތަކެތި ބޭނުން ކުރަން ޖައްސާށެވެ.

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);