У меня есть видео на YouTube, которое я хочу разместить на своей веб-странице.
Я хочу масштабировать видео, чтобы оно соответствовало проценту браузера пользователей, а также чтобы сохранить соотношение сторон.
Я пробовал это:
<iframe width="87%" height="315" src="http://www.youtube-nocookie.com/embed/dU6OLsnmz7o" frameborder="0" allowfullscreen></iframe>
Но это делает игрока более широким, а не выше.
Нужно ли прибегать к JavaScript (или нестандартным CSS)?
Я столкнулся с подобной проблемой с моим сайтом при разработке некоторого отзывчивого CSS. Я хотел, чтобы любые встроенные объекты Youtube изменялись с изменением размера при переключении с настольного CSS на нечто меньшее (я использую медиа-запросы для повторного отображения содержимого для мобильных устройств).
Решение, на котором я остановился, - это CSS и надбавка. В принципе, у меня есть три класса видео в моем CSS:
.video640 {width: 640px; height: 385px}
.video560 {width: 560px; height: 340px}
.video480 {width: 480px; height: 385px}
... и я назначаю один из них содержимому Youtube, которое я включаю, в зависимости от его первоначального размера (вам может потребоваться больше классов, я просто выбрал наиболее распространенные размеры).
В мультимедийном запросе CSS для более мелких устройств эти же классы просто повторяются так:
.video640 {width: 230px; height: 197px}
.video560 {width: 230px; height: 170px}
.video480 {width: 240px; height: 193px}
Я понимаю, что это требует некоторой надстройки "вверх", когда вы включаете видео в свой HTML (то есть добавляете класс), но если вы не хотите идти по маршруту Javascript, это работает очень хорошо - вы может пересобирать ваши видео-классы на столько разных размеров, сколько вам нужно. Вот как выглядит надпись Youtube:
<object class="video640" type="application/x-shockwave-flash" value="YOUTUBE URL">
<param name="movie" value="YOUTUBE URL"></param>
</object>
Что я считаю лучшим решением для CSS.
.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>
Довольно легко с некоторыми javascript.
jQuery(function() {
function setAspectRatio() {
jQuery('iframe').each(function() {
jQuery(this).css('height', jQuery(this).width() * 9/16);
});
}
setAspectRatio();
jQuery(window).resize(setAspectRatio);
});
Этот плагин jQuery в последнее время делает раунды, он называется FitVids и делает именно то, что вам нужно, изменяет размеры видео на основе размера браузера в то время как поддерживая соотношение сторон.
Трюк, чтобы сделать видеоизображение видео youtube, заключается в том, чтобы сделать ширину iframe 100% и поместить ее в div с "padding-bottom", равным пропорции в процентах. Например.
Но проблема в том, что у вас будет много страниц со встроенными видео YoutTube. Здесь плагин jquery, который сканирует все видео на странице и автоматически изменяет их размер, изменяя код iframe, как указано выше. Это означает, что вам не нужно менять код. Включите javascript, и все ваши видеоролики YouTube станут авторезистирующими. https://skipser.googlecode.com/files/youtube-autoresizer.js
Старый вопрос, но я думаю, что теги @media CSS 3 будут полезны в этом случае.
Вот мое решение аналогичной проблемы.
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>
В основном это добавляет точку останова на 768 пикселей, где видео изменяет размер. Вы также можете добавить контрольные точки на 992 и 1280 для еще большего количества репсонов. (номера основаны на стандартных размерах Bootstrap).
Вы можете использовать два класса, которые будут масштабировать размер видео в зависимости от размера упаковочного div. Рассмотрим этот пример:
<div class="content-wrapper">
<div class="iframe-wrapper res-16by9">
<iframe src="https://www.youtube.com/embed/pHsYFURtzzY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Теперь посмотрите на 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%;
}
Обратите внимание, что вам нужно будет обернуть iframe в div, ширина которого равна 100%, а позиция - относительному. Вы также должны добавить нижний отступ в оболочку iframe. Этот отступ будет определять высоту видео. Я рекомендую создать два класса, которые будут представлять соотношение изображений.
Довольно просто вычислить правильную нижнюю подкладку для оберток, которые представляют определенное разрешение. Например, для разрешений 4 на 3 и 16 на 9 нижний отступ будет равен:
[4/3 res]
100/4 * 3 = 75%;
[16/9 res]
100/16 * 9 = 56,25%
Затем поместите iframe как абсолютный и поместите его в верхний левый угол разделительного блока. Также обязательно установите ширину и высоту iframe на 100%. Теперь вам нужно сделать еще одну вещь. Вы сделали.
Добавьте класс, который соответствует правильному разрешению для вас. Он будет масштабировать ширину и высоту изображения соответственно, сохраняя правильные пропорции на месте.
Пример выше работает для любого iframe. Это означает, что вы также можете использовать его для карт Google iframe.
Вы можете использовать style="max-width: %87; max-height: %87;"
В дополнение к Дарвину и Тодду следующее решение будет
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;
}
}
Это то, что сработало для меня. Это слегка измененный код из 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>
В списке ответов на использование js есть несколько предложений по изменению структуры сгенерированного iframe. Я думаю, что есть риск с этим, потому что, когда вы завершаете iframe внутри других элементов, возможно, что API YouTube потеряет "соединение" с iframe (особенно если вы передадите элемент в качестве node вместо использования определенного идентификатора, например меня). Скорее всего, чтобы обойти это, используйте javascript для изменения содержимого до того, как вы действительно запустите проигрыватель YouTube.
фрагмент из моего кода:
/**
* 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;
};
Просто установите высоту и ширину iframe с помощью метрики CSS vw. Он использует ширину устройства в качестве параметра:
.videoWrapper iframe {
height: 36.6vw;
width: 65vw;
}
Добавить код JavaScript, чтобы дать каждому iTrame iTrame класс:
$('iframe[src*="youtube"]').addClass('youtube')
Затем в Media Queries используйте ваш класс трубки для установки другого размера.
.youtube {
/* Do stuff here */
}
Легче и оптимизировано для CMS, чем руководство.