У меня есть видеоролик YouTube, встроенный на нашем веб-сайте, и когда я сжимаю экран до размеров планшета или телефона, он перестает сокращаться шириной около 560 пикселей. Является ли это стандартом для видео YouTube или есть что-то, что я могу добавить в код, чтобы уменьшить его?
Утратите видео YouTube на гибкую ширину
Ответ 1
Вы можете настроить видеоролики YouTube с помощью CSS. Оберните iframe в div с классом "videowrapper" и примените следующие стили:
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div.videowrapper должен находиться внутри чувствительного элемента. Прокладка на .videowrapper необходима, чтобы видео не рухнуло. Возможно, вам придется настроить номера в зависимости от вашего макета.
Ответ 2
Если вы используете Bootstrap, вы также можете использовать отзывчивую вставку. Это полностью автоматизирует процесс реагирования видео.
http://getbootstrap.com/components/#responsive-embed
Вот пример кода ниже.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Ответ 3
Я использовал CSS в принятом ответе здесь для своих отзывчивых видеороликов YouTube - отлично работал до тех пор, пока YouTube не обновил свою систему в начале августа 2015 года. Видео на YouTube имеют одинаковые размеры, но по какой-либо причине CSS в принятый ответ теперь почтовые ящики все наши видео. Черные полосы сверху и снизу.
Я поместил размеры с размерами и решил избавиться от верхнего дополнения и изменить нижнее дополнение на 56.45%
. Кажется хорошо выглядеть.
.videowrapper {
position: relative;
padding-bottom: 56.45%;
height: 0;
}
Ответ 4
Усовершенствованное решение только для Javascript для YouTube и Vimeo с помощью jQuery.
// -- After the document is ready
$(function() {
// Find all YouTube and Vimeo videos
var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
// Get parent width of this video
var newWidth = $el.parent().width();
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
});
Простота использования только с вложением:
<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
Или с адаптивной структурой стиля, такой как Bootstrap.
<div class="row">
<div class="col-sm-6">
Stroke Awareness
<div class="col-sm-6>
<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
- Охватывает ширину и высоту iframe, чтобы сохранить соотношение сторон.
- Можно использовать соотношение сторон для ширины и высоты (
width="16" height="9"
) - Ожидает, что документ будет готов до изменения размера
- Использует селектор jQuery
*=
вместо начала строки^=
- Возвращает ширину ссылки от родителя видео iframe вместо предопределенного элемента
- Решение Javascript
- Нет CSS
- Не требуется обертка
Спасибо @Dampas за отправную точку. fooobar.com/questions/55587/...
Ответ 5
Это старый поток, но я нашел новый ответ на https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
Проблема с предыдущим решением заключается в том, что вам нужно иметь специальный div вокруг видеокода, который не подходит для большинства целей. Итак, вот решение JavaScript без специального div.
// Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!!
var $allVideos = $("iframe[src^='https://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
// END RESIZE VIDEOS
Ответ 6
Решение@magi182 твердое, но ему не хватает возможности устанавливать максимальную ширину. Я думаю, что максимальная ширина 640px необходима, потому что otherwhise миниатюра youtube выглядит pixelated.
Мое решение с двумя обертками работает как прелесть для меня:
.videoWrapperOuter {
max-width:640px;
margin-left:auto;
margin-right:auto;
}
.videoWrapperInner {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 50%;
padding-top: 25px;
height: 0;
}
.videoWrapperInner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="//www.youtube.com/embed/C6-TWRn0k4I"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
Я также установил глубину заполнения во внутренней обертке до 50%, потому что с @magi182 56% появилась черная полоса сверху и снизу.
Ответ 7
Смотрите здесь полный текст и живой пример здесь.
#hero { width:100%;height:100%;background:url('{$img_ps_dir}cms/how-it-works/hero.jpg') no-repeat top center; }
.videoWrapper { position:relative;padding-bottom:56.25%;padding-top:25px;max-width:100%; }
<div id="hero">
<div class="container">
<div class="row-fluid">
<script src="https://www.youtube.com/iframe_api"></script>
<center>
<div class="videoWrapper">
<div id="player"></div>
</div>
</center>
<script>
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId:'xxxxxxxxxxx',playerVars: { controls:0,autoplay:0,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,theme:'light' }
} );
resizeHeroVideo();
}
</script>
</div>
</div>
</div>
var player = null;
$( document ).ready(function() {
resizeHeroVideo();
} );
$(window).resize(function() {
resizeHeroVideo();
});
function resizeHeroVideo() {
var content = $('#hero');
var contentH = viewportSize.getHeight();
contentH -= 158;
content.css('height',contentH);
if(player != null) {
var iframe = $('.videoWrapper iframe');
var iframeH = contentH - 150;
if (isMobile) {
iframeH = 163;
}
iframe.css('height',iframeH);
var iframeW = iframeH/9 * 16;
iframe.css('width',iframeW);
}
}
resizeHeroVideo вызывается только после полной загрузки проигрывателя Youtube (при загрузке страницы не работает) и при изменении размера окна браузера. Когда он запускается, он вычисляет высоту и ширину iframe и присваивает соответствующие значения, поддерживающие правильное соотношение сторон. Это работает независимо от того, изменяется ли окно горизонтально или вертикально.
Ответ 8
Хорошо, выглядит как большие решения.
Почему бы не добавить width: 100%;
прямо в ваш iframe.;)
Итак, ваш код будет выглядеть как <iframe style="width: 100%;" ...></iframe>
Попробуй, это сработает, поскольку это сработало в моем случае.
Наслаждайтесь!:)
Ответ 9
Я делаю это с простым css следующим образом
HTML CODE
<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>
CSS CODE
<style type="text/css">
#vid {
max-width: 100%;
height: auto;
}