Làm cách nào để làm cho trình phát YouTube mở rộng với chiều rộng của trang mà còn giữ tỷ lệ khung hình?

Question

Tôi có một video trên YouTube mà tôi muốn đưa lên trang web của mình.

Tôi muốn chia tỷ lệ video thành vừa với phần trăm trình duyệt của người dùng mà còn giữ tỷ lệ khung hình.

Tôi đã thử này:

<iframe width="87%" height="315" src="http://www.youtube-nocookie.com/embed/dU6OLsnmz7o" frameborder="0" allowfullscreen></iframe> 

Nhưng điều đó không chỉ làm cho người chơi rộng hơn, không cao hơn.

Tôi có phải sử dụng JavaScript (hoặc CSS không chuẩn) không?

Answer 1

tôi nhấn một vấn đề tương tự với trang web của tôi khi phát triển một số CSS đáp ứng. Tôi muốn bất kỳ đối tượng Youtube được nhúng nào thay đổi kích thước, với khía cạnh, khi chuyển từ CSS của máy tính để bàn sang một cái gì đó nhỏ hơn (tôi sử dụng truy vấn phương tiện để hiển thị lại nội dung cho thiết bị di động).

Giải pháp tôi đã giải quyết là CSS và đánh dấu dựa trên. Về cơ bản, tôi có ba lớp video trong CSS của tôi như sau:

.video640 {width: 640px; height: 385px} 
.video560 {width: 560px; height: 340px} 
.video480 {width: 480px; height: 385px} 

... và tôi gán một trong những nội dung Youtube tôi bao gồm, tùy thuộc vào kích thước ban đầu của nó (bạn có thể cần thêm các lớp học, tôi chỉ chọn nhiều nhất kích thước phổ biến).

Trong phương tiện CSS truy vấn cho các thiết bị nhỏ hơn, các lớp này cùng chỉ đơn giản là tái nói như vậy:

.video640 {width: 230px; height: 197px} 
.video560 {width: 230px; height: 170px} 
.video480 {width: 240px; height: 193px} 

Tôi đánh giá cao điều này đòi hỏi một số mark-up "lên phía trước" khi bao gồm cả video trong HTML của bạn (tức là thêm một lớp), nhưng nếu bạn không muốn đi xuống các tuyến đường Javascript, điều này hoạt động khá tốt - bạn có thể nhà nước lại các lớp học video của bạn cho nhiều kích cỡ khác nhau như bạn yêu cầu. Dưới đây là cách đánh dấu trang Youtube:

<object class="video640" type="application/x-shockwave-flash" value="YOUTUBE URL"> 
    <param name="movie" value="YOUTUBE URL"></param> 
</object> 

Answer 2

This jQuery plugin đã thực hiện các vòng trễ, được gọi là FitVids và thực hiện chính xác những gì bạn cần, thay đổi kích thước video dựa trên kích thước trình duyệt trong khi duy trì tỷ lệ khung hình.

http://fitvidsjs.com/

Answer 3

Bạn có thể sử dụng style="max-width: %87; max-height: %87;"

Answer 4

Khá dễ dàng với một số javascript.

jQuery(function() { 
    function setAspectRatio() { 
     jQuery('iframe').each(function() { 
     jQuery(this).css('height', jQuery(this).width() * 9/16); 
     }); 
    } 

    setAspectRatio(); 
    jQuery(window).resize(setAspectRatio); 
}); 

Answer 5

Thêm mã JavaScript để cung cấp cho mỗi youtube iFrame một lớp:

$('iframe[src*="youtube"]').addClass('youtube') 

Sau đó, trong truy vấn phương tiện sử dụng bạn lớp ống để thiết lập một kích thước khác nhau.

.youtube { 
    /* Do stuff here */ 
} 

Dễ dàng hơn và tối ưu hóa cho CMS hơn cách thủ công.

Answer 6

Bí quyết tạo video YouTube tự động hóa là làm cho chiều rộng khung nội tuyến 100% và đặt nó trong div bằng "đệm dưới cùng" bằng tỷ lệ khung hình theo phần trăm. Ví dụ.

Nhưng vấn đề là - bạn sẽ có nhiều trang với video YoutTube được nhúng. Đây là một plugin jquery sẽ quét tất cả các video trên trang và làm cho chúng có thể thay đổi kích thước tự động bằng cách thay đổi mã khung nội tuyến như trên. Điều đó có nghĩa là bạn không phải thay đổi bất kỳ mã nào. Bao gồm javascript và tất cả các video trên YouTube của bạn trở thành tự động. https://skipser.googlecode.com/files/youtube-autoresizer.js

Answer 7

Điều tôi tin là giải pháp CSS tốt nhất.

.auto-resizable-iframe { 
    max-width: 420px; 
    margin: 0px auto; 
} 

.auto-resizable-iframe > div { 
    position: relative; 
    padding-bottom: 75%; 
    height: 0px; 
} 

.auto-resizable-iframe iframe { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
} 

<div class="auto-resizable-iframe"> 
    <div> 
    <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe> 
    </div> 
</div> 

Demo http://jsfiddle.net/JBhp2/

Answer 8

Cũ câu hỏi, nhưng tôi nghĩ rằng @media CSS 3 thẻ sẽ rất hữu ích trong trường hợp này.

Đây là giải pháp của tôi cho một vấn đề tương tự.

CSS:

@media only screen and (min-width: 769px) { 
    .yVid { 
     width: 640px; 
     height: 360px; 
     margin: 0 auto; 
    } 
} 

@media only screen and (max-width: 768px) { 
    .yVid { 
     width: 560px; 
     height: 315px; 
     margin: 0 auto; 
    } 
} 

HTML:

<div class="yVid"> 
    <iframe width="100%" height="100%" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe> 
</div> 

này về cơ bản thêm một breakpoint tại 768px nơi video thay đổi kích thước của chính nó. Bạn cũng có thể thêm điểm ngắt tại 992 và 1280 để có kích thước video nhiều hơn nữa. (số dựa trên kích thước chuẩn Bootstrap).

Answer 9

Ngoài Darwin và Todd giải pháp sau đây sẽ

1. tránh lề dưới
2. phát huy tối đa chiều rộng cho màn hình lớn
3. giảm thiểu chiều cao theo quan điểm của điện thoại di động
4. giữ một kích thước cố định cho trình duyệt tương thích @media none

HTML:

<div class="video_player"> 
    <div class="auto-resizable-iframe"> 
    <div> 
     <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM">  </iframe> 
    </div> 
    </div> 
</div> 

CSS:

.videoplayer{ 

    text-align: center; 
    vertical-align: middle; 

    background-color:#000000; 

    margin: 0; 
    padding: 0; 

    width: 100%; 
    height:420px; 

    overflow:hidden; 

    top: 0; 
    bottom: 0; 

} 

.auto-resizable-iframe { 
    width:100%; 
    max-width:100%; 
    margin: 0px auto; 
} 

.auto-resizable-iframe > div { 
    position: relative; 
    padding-bottom:420px; 
    height: 0px; 
} 

.auto-resizable-iframe iframe { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
} 


//full screen 
@media (min-width:0px) { 

    .videoplayer{ 
     height:100%; 
    } 

    .auto-resizable-iframe > div { 
     padding-bottom:100%; 
    }   

} 

//mobile/pad view 
@media (min-width:600px) { 

    .videoplayer{ 
     height:420px; 
    } 

    .auto-resizable-iframe > div { 
     padding-bottom:420px; 
    }  

}  

Answer 10

Đây là những gì làm việc cho tôi. Đây là mã được sửa đổi đôi chút từ YouTube Embed Code Generator.

CSS:

.video-container { 
    position: relative; 
    width: 100%; 
    height: 0; 
    padding-bottom: 56.27198%; 
    } 
.video-container iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    } 

HTML:

<div class="video-container"> 
    <iframe width="560px" height="315px" src="https://www.youtube.com/embed/XXXXxxxx?&theme=dark&autohide=2&iv_load_policy=3"><iframe> 
</div> 

Answer 11

Bạn có thể sử dụng hai lớp đó sẽ mở rộng kích thước của video dựa trên kích thước của gói div. Hãy xem xét ví dụ này:

<div class="content-wrapper"> 
    <div class="iframe-wrapper res-16by9"> 
     <iframe src="https://www.youtube.com/embed/pHsYFURtzzY" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div> 

Bây giờ, hãy xem css.

.content-wrapper{ 
    max-width: 800px; 
    margin: 0 auto; 
    background-color: #fff; 
} 

.iframe-wrapper{ 
    width: 100%; 
    position: relative; 
} 

.res-4by3{ 
    padding-bottom: 75%; 
} 

.res-16by9{ 
    padding-bottom: 56.25%; 
} 

.iframe-wrapper iframe{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

Lưu ý rằng bạn sẽ phải quấn khung nội tuyến trong div mà widht được đặt thành 100% và vị trí được đặt thành tương đối. Bạn phải allso thêm một padding padding vào iframe wrapper. Phần đệm này sẽ xác định chiều cao của video. Tôi khuyên bạn nên tạo hai lớp sẽ đại diện cho tỷ lệ hình ảnh.

Thật dễ dàng để tính toán phần đệm bên phải phù hợp cho các gói có độ phân giải nhất định. Ví dụ cho res 4 bằng 3 và 16 9 sẽ phải từ dưới đệm bằng:

[4/3 res]

100/4 * 3 = 75%;

[16/9 res]

100/16 * 9 = 56,25%

Sau đó, vị trí của các iframe như tuyệt đối và đẩy nó vào góc cao bên trái của div wraping. Ngoài ra, tôi chắc chắn đặt chiều rộng và chiều cao iframe thành 100%. Bây giờ bạn phải làm một điều nữa. Bạn xong việc rồi.

Thêm lớp phù hợp với độ phân giải phù hợp với bạn. Nó sẽ mở rộng quy mô chiều rộng và chiều cao một cách tôn trọng giữ đúng tỷ lệ tại chỗ.

Ví dụ ở trên phù hợp với bất kỳ ifrmae nào. Thats có nghĩa là bạn cũng có thể sử dụng nó cho iframe google maps.

Answer 12

Có một vài đề xuất về danh sách câu trả lời để sử dụng js để sửa đổi cấu trúc của iframe được tạo. Tôi nghĩ rằng có nguy cơ với điều đó bởi vì khi bạn quấn iframe bên trong các phần tử khác, API YouTube sẽ mất 'kết nối' với iframe (đặc biệt nếu bạn chuyển phần tử vào dưới dạng nút thay vì sử dụng id cụ thể như tôi) . Đó là để có được xung quanh nó thực sự, sử dụng javascript để sửa đổi nội dung trước khi bạn thực sự kích hoạt các cầu thủ youtube.

một đoạn từ mã của tôi:

/** 
* Given the player container, we will generate a new structure like this 
* 
* <div class="this-is-the-container"> 
*  <div class="video-player"> 
*   <div class="auto-resizable-iframe"> 
*    <div> 
*     <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM">  </iframe> 
*    </div> 
*   </div> 
*  </div> 
* </div> 
* 
* @return {Node} the real player node deep inside 
*/ 
YouTube.renderResizable = function (playerContainer) { 
    // clean up the content of player container 
    playerContainer.textContent = ''; 

    var playerDiv = document.createElement('div'); 
    playerDiv.setAttribute('class', 'video-player'); 

    playerContainer.appendChild(playerDiv); 

    // add the auto-resizable-frame-div 
    var resizeableDiv = document.createElement('div'); 
    resizeableDiv.setAttribute('class', 'auto-resizable-iframe'); 

    playerDiv.appendChild(resizeableDiv); 

    // create the empty div 
    var div = document.createElement('div'); 
    resizeableDiv.appendChild(div); 

    // create the real player 
    var player = document.createElement('div'); 
    div.appendChild(player); 

    return player; 
};