问题
I have a YouTube video I want to put on my web page.
I want to scale the video to fit to a percent of the users browser but also to keep the aspect ratio.
I have tried this:
<iframe width="87%" height="315" src="http://www.youtube-nocookie.com/embed/dU6OLsnmz7o" frameborder="0" allowfullscreen></iframe>
But that does only make the player wider, not higher.
Does I have to resort to JavaScript (or non-standard CSS)?
回答1:
I hit a similar issue with my site when developing some responsive CSS. I wanted any embedded Youtube objects to resize, with aspect, when switching from the desktop CSS to something smaller (I use media queries to re-render content for mobile devices).
The solution I settled on was CSS and mark-up based. Basically, I have three video classes in my CSS thus:
.video640 {width: 640px; height: 385px}
.video560 {width: 560px; height: 340px}
.video480 {width: 480px; height: 385px}
… and I assign one of these to the Youtube content I include, depending on its original size (you may need more classes, I just picked the most common sizes).
In the media query CSS for smaller devices, these same classes are simply re-stated like so:
.video640 {width: 230px; height: 197px}
.video560 {width: 230px; height: 170px}
.video480 {width: 240px; height: 193px}
I appreciate this requires some mark-up "up-front" when including videos in your HTML (i.e. adding a class), but if you don't want to go down the Javascript route, this works pretty well -- you could re-state your video classes for as many different sizes as you require. Here's how the Youtube mark-up looks:
<object class="video640" type="application/x-shockwave-flash" value="YOUTUBE URL">
<param name="movie" value="YOUTUBE URL"></param>
</object>
回答2:
What i believe to be the best CSS solution.
.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/
回答3:
Quite easy with some javascript.
jQuery(function() {
function setAspectRatio() {
jQuery('iframe').each(function() {
jQuery(this).css('height', jQuery(this).width() * 9/16);
});
}
setAspectRatio();
jQuery(window).resize(setAspectRatio);
});
回答4:
This jQuery plugin has been making the rounds of late, it's called FitVids and does exactly what you need, resizes videos based on browser size whilst maintaining aspect ratio.
http://fitvidsjs.com/
回答5:
The trick to make a youtube video autoresize is to make the iframe width 100% and put it in a div with a "padding-bottom" equal to the aspect ratio in percentage. E.g.
But the problem is - you would have a lot of pages with embedded YoutTube videos already. Here's a jquery plugin that will scan all videos on the page and make them resizable automatically by changing the iframe code to be as above. That means you don't have to change any code. Include the javascript and all your YouTube videos become autoresizing. https://skipser.googlecode.com/files/youtube-autoresizer.js
回答6:
Old question, but I think the @media CSS 3 tags would be helpful in this instance.
Here is my solution to a similar problem.
The 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;
}
}
The HTML:
<div class="yVid">
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>
This basically adds a breakpoint at 768px where the video resizes itself. You could also add breakpoints at 992 and 1280 for an even more repsonsive video size. (numbers based on Bootstrap standard sizes).
回答7:
You could use two classes that would scale the size of the video based on the size of the wrapping div. Consider this example:
<div class="content-wrapper">
<div class="iframe-wrapper res-16by9">
<iframe src="https://www.youtube.com/embed/pHsYFURtzzY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Now look at the 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%;
}
Note that you will have to wrap the iframe in a div who's width is set to 100% and position is set to relative. You have to also add a bottom-padding to iframe wrapper. This padding will define the height of a video. I recommend to create two classes that will represent the image ratio.
It is quite easy to calculate the right bottom-padding for wrappers that represent certain resolution. For example for res 4 by 3 and 16 by 9 would have bottom-padding equal to:
[4/3 res]
100 / 4 * 3 = 75%;
[16/9 res]
100 / 16 * 9 = 56.25%
Then position the iframe as absolute and push it to the top left corner of the wraping div. Also meke sure to set iframe width and height to 100%. Now you have to do one more thing. You are done.
Add the class that fits the right resolution for you. It will scale the image width and height respectively keeping the right proportions in place.
The example above works for any iframe. Thats mean you can also use it for google maps iframe.
回答8:
You can use style="max-width: %87; max-height: %87;"
回答9:
In addition to Darwin and Todd the following solution will
- avoid the bottom margin
- maximize the width for large screens
- minimize the height in mobile view
- keep a fixed size for @media none compatible browsers
The 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>
The 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;
}
}
回答10:
This is what worked for me. This is slightly modified code from the YouTube Embed Code Generator.
The 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%;
}
The 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>
回答11:
There are a few suggestions on the list of answers to use js to modify the structure of generated iframe. I think there is a risk with that because when you wrap the iframe inside other elements it's possible that the YouTube API will lose 'connection' with the iframe (especially if you pass the element in as a node instead of using specific id like me). It's rather to get around it actually, use javascript to modify the content before you actually trigger the youtube player.
a snippet from my code:
/**
* 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;
};
回答12:
Just set iframe height and width with CSS vw metric. It uses device width as parameter:
.videoWrapper iframe {
height: 36.6vw;
width: 65vw;
}
回答13:
Add JavaScript code to give each youtube iFrame a class:
$('iframe[src*="youtube"]').addClass('youtube')
Then in the Media Queries use the you tube class to set a different size.
.youtube {
/* Do stuff here */
}
Easier and optimized to CMS than the manual way.
来源：https://stackoverflow.com/questions/7737557/how-can-i-make-the-youtube-player-scale-to-the-width-of-the-page-but-also-keep-t