PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

แนะนำ การแทรก video youtube ในเว็บรองรับ responsive design

10 March 2015 By


ไปเจอเว็บที่แนะนำการแทรก video แบบรองรับ responsive design 
หรือการปรับขนาดตามขนาดหน้าจอที่แสดงผล สามารถเข้าไปดูรายละเอียด
ไดที่  http://coolestguidesontheplanet.com/videodrome/youtube/
 
ตัวอย่างโค้ดที่ใช้งาน
เป็นการสมมติขนาดหน้าจอต่างๆ โดยที่โค้ดการเรียกใช้งาน
video เหมือนเดิม แต่ขนาดของ video มีการปรับตามความกว้างของขนาด div
ที่ครอบไว้อีกที
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .video-container {
        position:relative;
        padding-bottom:56.25%;
        padding-top:30px;
        height:0;
        overflow:hidden;
    }
    .video-container iframe, .video-container object, .video-container embed {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }    
    </style>
</head>
<body>
 
<div style="margin:auto;width:800px;position:relative;">
 
    <div style="position:relative;width:250px;">
      <div class="video-container">
       <iframe width="680" height="453" src="//www.youtube.com/embed/QCRaVYPFtO0?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>    
        </div>         
    </div>   
    <br>   <br> 
    <div style="position:relative;width:300px;">

      <div class="video-container">
       <iframe width="680" height="453" src="//www.youtube.com/embed/QCRaVYPFtO0?rel=0" frameborder="0" allowfullscreen></iframe>    
        </div>               
        
    </div>   
    <br>   <br> 
    <div style="position:relative;width:500px;">

      <div class="video-container">
       <iframe width="680" height="453" src="//www.youtube.com/embed/QCRaVYPFtO0?rel=0" frameborder="0" allowfullscreen></iframe>    
        </div>               
        
    </div>   
    <br>   <br> 
    
    <div style="position:relative;width:700px;">
     
      <div class="video-container">
       <iframe width="680" height="453" src="//www.youtube.com/embed/QCRaVYPFtO0?rel=0" frameborder="0" allowfullscreen></iframe>    
        </div>                 
        
    </div>                               
    
</div>    
          
</body>
</html>
 
 
ตัวอย่าง 
 
 







Tags:: css video responsive youtube





URL สำหรับอ้างอิง