in English

បង្កប់

បង្កើត​ការ​បង្កប់​វីដេអូ ឬ​ការ​បញ្ចាំង​ស្លាយ​ដែល​ឆ្លើយតប​ដោយ​ផ្អែក​លើ​ទទឹង​របស់​មេ ដោយ​បង្កើត​សមាមាត្រ​ខាងក្នុង​ដែល​ធ្វើ​មាត្រដ្ឋាន​លើ​ឧបករណ៍​ណាមួយ។

អំពី

ច្បាប់ត្រូវបានអនុវត្តដោយផ្ទាល់ទៅ <iframe>, <embed>, <video>, និង <object>ធាតុ; ជាជម្រើសប្រើថ្នាក់បន្តពូជយ៉ាងច្បាស់លាស់ .embed-responsive-itemនៅពេលអ្នកចង់ផ្គូផ្គងរចនាប័ទ្មសម្រាប់គុណលក្ខណៈផ្សេងទៀត។

Pro-Tip! អ្នកមិនចាំបាច់បញ្ចូលទៅ 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;