มาทำ Responsive embeds แสดง Youtube Slideshare บนเว็บให้รองรับมือถือกัน

ยุคของ Responsive Web มาถึง embeds code ต้องย่อขยายได้ตามหน้าจอ 

เมื่อปีที่ผ่านมาของการทำเว็บเป็นยุคแห่งการแชร์และแบ่งปัน ในปีนี้ และต่อไปจะเป็นยุคของ การทำ Responsive Web หรือ เว็บที่สามารถปรับตัวเองให้เข้ากับหน้าจอได้อัตโนมัติ ซึ่งตอนนี้ เว็บต่างๆเริ่มปรับตัวให้เป็น Responsive Web แล้วเพื่อรองรับผู้ใช้งานจากหน้าจอที่หลากหลาย 

แต่ก็มักจะพบกับปัญหา หากเราต้องการนำ embeds code ของ พวก Youtube ,Slideshare หรือ  vimeo นอกจากนั้นยังสามารถใช้ร่วมกับการใส่ รูป วีดีโอ หรืออื่นๆได้

<!-- การใส่แบบปรกติ -->
<iframe width="560" height="315" src="//www.youtube.com/embed/hkCDWRKnXU0" frameborder="0" allowfullscreen></iframe>
 
<!-- ให้ลบ width/height ออกไป-->
<iframe src="//www.youtube.com/embed/hkCDWRKnXU0" frameborder="0" allowfullscreen></iframe>

 ต่อมาให้เรา สร้าง div เพื่อ ครอบ ตัว embed

<div class="responsive-embed"> <!-- ใส่ code embed ในนี้ --> </div>

 จากนั้นเราไปเพิ่ม css class .responsive-embed ในไฟล์ css  

.responsive-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}
.responsive-embed iframe,
.responsive-embed object,
.responsive-embed embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

 

มาดูตัวอย่างการใส่กัน embeds code  responsive กัน

การใส่ Embeds Youtube

<div class="responsive-embed">
   <iframe 
      src="//www.youtube.com/embed/hkCDWRKnXU0" 
      frameborder="0">
   </iframe>
</div>

 การใส่ Embeds Slideshare

<div class="responsive-embed">
   <iframe 
      src="http://www.slideshare.net/slideshow/embed_code/14167122" 
      frameborder="0" 
      marginwidth="0" 
      marginheight="0" 
      scrolling="no">
   </iframe>
</div>

  การใส่ Embeds Vimeo

<div class="responsive-embed">
   <iframe 
      src="http://player.vimeo.com/video/10400661?title=0&amp;byline=0&amp;portrait=0" 
      frameborder="0" 
      webkitAllowFullScreen mozallowfullscreen allowFullScreen>
   </iframe>
</div>

 

 

สำหรับผู้ที่ใช้ Joomla ผมทำ Responsive YouTube Plugin ไปโหลดกันได้เลย http://colorpack.co.th/training/extension-download/item/75-responsive-youtube-plugin.html