วิธีใช้ Bootstrap แสดงผล Youtube Video Embed แบบ Responsive

&NewLine;<figure class&equals;"wp-block-video"><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">การแสดงผลวีดีโอของ Youtube ในเว็บไซต์นั้น Embed Code ของวีดีโอที่ได้มา เราจะได้มาในรูปแบบของ iframe ซึ่งทำให้จัดการขนาดที่เหมาะสมแต่ละน่าจอค่อนข้างลำบาก <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">Bootstrap เฟรมเวิร์ค เวอร์ชั่น 3 มีคลาสที่ใช้สำหรับการแสดงผล iframe video ชื่อว่า <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code>embed-responsive<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">และสามารถปรับอัตราส่วนการแสดงผลด้วยคลาสดังต่อไปนี้ &lpar; ซึ่งโดยส่วนใหญ่ขนาดวีดีโอที่แสดงผลมักจะเป็น 16 ต่อ 9 ให้ใช้คลาส embed-responsive-16by9<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code>embed-responsive-1by1&NewLine;embed-responsive-4by3&NewLine;embed-responsive-16by9&NewLine;embed-responsive-21by9<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">โดยวิธีใช้งานคือการครอบคลาส <strong>embed-responsive embed-responsive-1by1<&sol;strong> ไว้บน div เหนือ iframe และใส่คลาสด้านล่างในแท็ก iframe<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code>embed-responsive-item<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ขั้นตอนการ Embed Youtube Video<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>เข้าไปที่ Link Youtube ที่เราต้องการจะแสดงผลบนหน้าเว็บไซต์ กดที่ปุ่ม แชร์ และเลือก ฝัง จากนั้น copy code iframe ตัวอย่างดังภาพด้านล่าง<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;วิธีใช้-Bootstrap-แสดงผล-Youtube-Video-1-940x322&period;png" alt&equals;"" class&equals;"wp-image-5190" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;วิธีใช้-Bootstrap-แสดงผล-Youtube-Video-1&period;png" data-full-size&equals;"2100x720" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>นำ iframe code มาวางในระหว่างคลาส embed-responsive และใส่คลาส embed-responsive-item ใน iframe ตัวอย่างตามโค๊ดด้านล่าง<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-preformatted"><div class&equals;"embed-responsive embed-responsive-16by9">&NewLine; <iframe class&equals;"embed-responsive-item" src&equals;"https&colon;&sol;&sol;www&period;youtube&period;com&sol;embed&sol;RFbjt0MFmTk" frameborder&equals;"0" allow&equals;"accelerometer&semi; autoplay&semi; encrypted-media&semi; gyroscope&semi; picture-in-picture" allowfullscreen><&sol;iframe>&NewLine;<&sol;div><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>เพียงเท่านี้วีดีโอของเราก็จะปรับการแสดงผลตามขนาดหน้าจอ หรือทำงานแบบ Responsive แล้ว กรณีที่เราอยากจัด column การแสดงผล หรือต้องการแสดงผล embed video หลายตัว ก็สามารถ จัด row column ได้เลย ตัวอย่างตามด้านล่าง<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-preformatted"><div class&equals;"row">&NewLine; <div class&equals;"col-lg-6 col-md-6 col-xs-6">&NewLine; <div class&equals;"embed-responsive embed-responsive-16by9">&NewLine; <iframe class&equals;"embed-responsive-item" src&equals;"https&colon;&sol;&sol;www&period;youtube&period;com&sol;embed&sol;aEyRRYdLISg" allowfullscreen><&sol;iframe>&NewLine; <&sol;div>&NewLine; <&sol;div>&NewLine; <div class&equals;"col-lg-6 col-md-6 col-xs-6">&NewLine; <div class&equals;"embed-responsive embed-responsive-16by9">&NewLine; <iframe class&equals;"embed-responsive-item" src&equals;"https&colon;&sol;&sol;www&period;youtube&period;com&sol;embed&sol;u6lUN6-dZpM" allowfullscreen><&sol;iframe>&NewLine; <&sol;div>&NewLine; <&sol;div>&NewLine;<&sol;div><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><&sol;p>&NewLine;