นายแทม ดอทคอม
นายแทม ดอทคอม
นายแทม สรรสาระบทความ
พัฒนาแอพและเว็บไซต์ ›› CSS

CSS วิธีปรับความกว้าง คลิป YouTube ให้เต็มจอ ได้สัดส่วนตามขนาดหน้าจอมือถือ แทบเลต

 วันศุกร์ที่ 7 ตุลาคม 2559 เวลา 11:20 น.

"ปรับขนาดความกว้างและความสูงคลิป YouTube ให้เต็มหน้าจอ และมีสัดส่วนที่สมดุล 16:9 เสมอบนอุปกรณ์พกพา ซึ่งเป็นที่นิยมในการเข้าขมเว็บไซต์ของ" - นายแทม

ทำการสร้าง class ไว้ในแทค หรือ ในไฟล์ .css จำนวน 2 class ดังนี้

.container_youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

 

 

แล้วเรียกใช้ class ทั้ง 2 ด้านบน  โดยครอบทับแทค< iframe> ของ youtube

สัดส่วนคลิปวีดีโอที่ได้จะเป็น 16:9 แสดงผลเต็มจอ และปรับเปลี่ยนเองตามขนาดหน้าจออุปกรณ์พกพาครับ


วันที่เผยแพร่ วันที่ปรับปรุง

รับบทความใหม่กด Like facebook : นายแทม ดอทคอม | คลิกเพื่อคุยกับนายแทม


PHP สอน funtion ค้นหาเลขไอพี (ip) ผู้เข้าชมเว็บไซต์

เลขไอพีช่วยให้เว็บมาสเตอร์สามารถนำไปใช้เชิงสถิติได้มากมาย เช่น การกำหนดการแสดงผลโฆษณา , การนับจำนวนผู้ใช้งาน ฯลฯ แม้ฟังก์ชั่นนี้จะไม่ได้แม่นยำ 100% เพราะไม่ได้อิง geolocation โดยตรง ซึ่งต้องเสียค่าบริการ แต่ก็พอช่วยให้ได้เลขไอพีผู้เข้าชมเว็บไซต์ได้ »» อ่านต่อ ...

Pace เว็บไซต์สร้าง Ajax Loader เพื่อแสดงสถานะ Loading เว็บไซต์แบบง่ายสุด ๆ

แม้ว่านักพัฒนาจะเขียน Code ให้เล็กเท่าไหร่ก็ตาม แต่ปัญหาบางครั้งอยู่ที่เครือข่าย คือ อัตราดาวโหลดต่ำมาก ๆ ทำให้ผู้ใช้ไม่ทนรอและปิดเว็บไซต์เราไป การเพิ่ม Ajax Loader จะช่วยบอกสถานะการดาวโหลดไฟล์เว็บไซต์ให้ผู้ใช้รู้ เพื่อให้ผู้ใช้ไม่เปลี่ยนใจปิดหน้าเว็บไซต์ของเราที่ขาวโพลนในขณะที่กำลังดาวโหลดไฟล์เว็บเพจนั้น ๆ »» อ่านต่อ ...

อัพเดทเทคนิค @font face วิธีเปลี่ยน font web บน Reponsive Web Design ให้แสดงผลถูกต้อง

สอนแก้ปัญหาการใช้ @font-face แล้วฟอนต์แสดงผลแค่บางบราวเซอร์ เช่น Chrome กับ Firefox แต่บราวเซอร์แอนดรอยด์กับไม่ยอมแสดงผล ผมจะมาวิเคราะห์จุดที่ผิดพลาด และ แนะนำไวยากรณ์ที่ถูกต้องครับ »» อ่านต่อ ...

ภาพรวมองค์ความรู้พื้นฐานที่ต้องมีในการสร้างเว็บไซต์

ขอให้คุณเริ่มต้นศึกษาภาพรวมก่อนจะลงมือทำเว็บไซต์ เพราะความรู้ในทุกส่วนมีความลึกลงไปเรื่อย ๆ ในเชิงเทคนิค และเกี่ยวข้องกันเสมอไม่มากก็น้อย คุณจะรู้อย่างเดียวไม่ได้ครับ แต่ขณะเดียวกันสัดส่วนความรู้ก็ไม่ต้องเท่ากันทั้งหมดครับ ผมขอให้รู้เกี่ยวกับ "ภาษา" ให้มากไว้ก่อน ยิ่งมาก ยิ่งดี รองลงมา คือ การออกแบบกราฟฟิคครับ ส่วนที่เหลือ ก็ค่อยเก็บตกระหว่างการสร้างเว็บไซต์ไปเรื่อย ๆ ครับ »» อ่านต่อ ...

บังคับเว็บบราวเซอร์ให้แสดงฟอนต์ตัวอักษรไทย (Thai Font) ด้วย CSS3 ฉบับทำจริง ทดสอบจริง

ด้วยความสามารถของ CSS3 ช่วยให้เว็บมาสเตอร์กำหนดให้บราวเซอร์แสดงผลตัวอักษรภาษาไทยตามที่ใจต้องการได้ครับ ดูตัวอย่างหัวเรื่องบทความด้านบนของหน้านี้ได้เลยครับ :) ทดสอบผ่านแล้วบนบราวเซอร์เด่นดังของโลก »» อ่านต่อ ...

ฟรีแอพมือถือดูยูทูป TubeBox Perfect Player for YouTube (รองรับ iOS6 กลับมาให้ดาวโหลดคลิปเก็บไว้ได้เหมือนเดิม) แจกให้โหลดฟรีประจำวันที่ 18 ตุลาคม 2012 (ราคาปกติ 0.99 เหรียญ)

น่าจะเป็นแอพที่เน้นดาวโหลดคลิปจาก YouTube มาเก็บไว้ในเครื่องที่ "เร็ว" และเสถียรที่สุดแล้วหละครับ ตัวแอพเองก่อนหน้านี้มีการอัพเดทขึ้น AppStore แล้วก็แฮงค์ใช้กันไม่ได้เลย โดนผู้ใช้บ่นระงม แต่ตอนนี้ผู้พัฒนาชาวเวียดนามได้อัพเดทให้ใหม่อีกครั้ง โอเคครับ ผม Update ตามก่อนหน้านี้แล้ว ใช้งานได้ดีเหมือนเดิม วันนี้เห็นแจกฟรีเลยรีบมาแจก แอพตัวนี้เป็น Univeral »» อ่านต่อ ...

ดู clip video youtube ที่ block ดินแดนสยาม

ในบางครั้งการจะขอเปิด Clip Video ของ youtube จะมีรายการแบบนี้ปรากฏคือ ไม่อนุญาตให้ดินแดนสยามเข้าชมในรายการบาง clip »» อ่านต่อ ...

สอนวิธีกู้รูปคืนที่ง่ายที่สุด เผลอลบรูปในโทรศัพท์ ทําไงดี หลังจากรีเซ็ทเครื่อง เปลี่ยนมือถือใหม่

แอพ Google Photos ก็จะสำเนารูปภาพและคลิปวีดีโอทุกครั้งที่เราถ่ายแบบเรียลไทม์ ไปไว้บน Server ของ Google เพียงแค่นี้ รูปและคลิปวีดีโอ ก็จะไม่หายอีกต่อไปนะครับแม้ว่าเราจะทำมือถือหาย รีเซทเครื่อง เปลี่ยนมือถือใหม่ หรือ เผลอลบรูปก็ตามครับ ที่สำคัญ มันฟรีตลอดชีพและพื้นที่ไม่จำกัดนีิสิ เจ๋งสุด ๆ »» อ่านต่อ ...

อีเมล์ หนึ่งในสิ่งสำคัญที่สุดในยุคตัวตนดิจิตอล

สิ่งที่สำคัญในการระบุ หรือ กู้ตัวตนของคุณ ในด้านธุรกรรมการเงิน, การใช้งานโซเชียล, ระบบการศึกษา แต่คนไทยละเลย หลายคนยังสมัครอีเมล์ด้วยตัวเองไม่เป็น แต่มีสมาร์ทโฟนใช้ได้ซะงั้น »» อ่านต่อ ...

วิธีพิมพ์รูป เอกสาร จากมือถือ แทปเลต Android โดยตรง รวมถึง iPhone iPad iPod iWatch

เจอเว็บไซต์เนื้อหาดี หรือ อยากพิมพ์รูปที่ชอบออกจากมือถือโดยตรง ไม่ต้องเอามาลงคอมพิวเตอร์ก่อน บทความนี้จะแนะนำคุณอย่างละเอียดครับ »» อ่านต่อ ...

แอพฟรี PhotoDirector แอพแต่งรูปที่ให้รูปออกมาเป็นมืออาชีพได้ง่ายขึ้น

แอพที่เหมือนหยิบความสามารถ Snapseed + LightRoom หลายฟังก์ชันมารวมร่างกัน เพิ่มเติม คือ การปรับเมนูให้ใช้งานง่าย - การลบวัตถุที่ไม่ชอบออกจากรูป - การปรับหน้าชัด - หลังเบลอ ได้อิสระ »» อ่านต่อ ...

เช็คด่วน 31 สิงหาคม 2016 ฟรีแอพ iOS แบบเสียเงิน แต่แจกฟรีในช่วงเวลาจำกัด โหลดด่วน (คัดจาก Thailand Store โหลดได้ชัวร์)

ใครคิดว่าแอพที่ผมแนะนำนี้ 'ยังไม่จำเป็นอะ รกเครื่อง' ผมแนะนำว่าโหลดไว้ก่อนครับ แล้วค่อยลบออกครับ เพราะคุณจะได้ใช้ฟรีตลอดไป เมื่อจำเป็นต้องใช้ขึ้นมา 'คุณจะไม่ต้องซื้อ' »» อ่านต่อ ...

สอนวิธีกู้รูปคืนที่ง่ายที่สุด เผลอลบรูปในโทรศัพท์ ทําไงดี หลังจากรีเซ็ทเครื่อง เปลี่ยนมือถือใหม่

แอพ Google Photos ก็จะสำเนารูปภาพและคลิปวีดีโอทุกครั้งที่เราถ่ายแบบเรียลไทม์ ไปไว้บน Server ของ Google เพียงแค่นี้ รูปและคลิปวีดีโอ ก็จะไม่หายอีกต่อไปนะครับแม้ว่าเราจะทำมือถือหาย รีเซทเครื่อง เปลี่ยนมือถือใหม่ หรือ เผลอลบรูปก็ตามครับ ที่สำคัญ มันฟรีตลอดชีพและพื้นที่ไม่จำกัดนีิสิ เจ๋งสุด ๆ »» อ่านต่อ ...

อีเมล์ หนึ่งในสิ่งสำคัญที่สุดในยุคตัวตนดิจิตอล

สิ่งที่สำคัญในการระบุ หรือ กู้ตัวตนของคุณ ในด้านธุรกรรมการเงิน, การใช้งานโซเชียล, ระบบการศึกษา แต่คนไทยละเลย หลายคนยังสมัครอีเมล์ด้วยตัวเองไม่เป็น แต่มีสมาร์ทโฟนใช้ได้ซะงั้น »» อ่านต่อ ...

วิธีพิมพ์รูป เอกสาร จากมือถือ แทปเลต Android โดยตรง รวมถึง iPhone iPad iPod iWatch

เจอเว็บไซต์เนื้อหาดี หรือ อยากพิมพ์รูปที่ชอบออกจากมือถือโดยตรง ไม่ต้องเอามาลงคอมพิวเตอร์ก่อน บทความนี้จะแนะนำคุณอย่างละเอียดครับ »» อ่านต่อ ...

Vivo xShot วิธีถอยรอมศูนย์ กลับไปใช้ FuntouchOS 1.16 version 2.5.3 Android 4.3

หลากหลายเหตุผลกันไปที่ผู้ใช้ Vivo xShot ยังคงพอใจกับคุณภาพของกล้อง แม้ว่าจะอัพเดทกันได้จนถึงรวมพาร์ทิชัน แต่หลายคนที่ยังไม่ได้รวมพาร์ทิชัน แต่ต้องการถอยกลับไปรอมศูนย์ไทยที่คุณภาพกล้องดีกว่า บทความนี้ช่วยคุณได้ครับ »» อ่านต่อ ...

แอพฟรี PhotoDirector แอพแต่งรูปที่ให้รูปออกมาเป็นมืออาชีพได้ง่ายขึ้น

แอพที่เหมือนหยิบความสามารถ Snapseed + LightRoom หลายฟังก์ชันมารวมร่างกัน เพิ่มเติม คือ การปรับเมนูให้ใช้งานง่าย - การลบวัตถุที่ไม่ชอบออกจากรูป - การปรับหน้าชัด - หลังเบลอ ได้อิสระ »» อ่านต่อ ...
 
นายแทม นายแทม ดอทคอม ™ 2007 - 2017
อนุญาตให้คัดลอกเนื้อหา ยกเว้นเพื่อการค้า

 นายแทม ดอทคอม |  นายแทม ดอทคอม
 นายแทม ดอทคอม |  @naitam

โดย ห้างหุ้นส่วนสามัญ นายแทม เว็บดีไซน์
ปณจ. 26 หางดง เชียงใหม่ 50230
052-081830