Zmniejsz wideo YouTube do responsywnej szerokości
Mam wideo z YouTube osadzone na naszej stronie internetowej i kiedy kurczę ekran do rozmiarów tabletu lub telefonu przestaje kurczyć się w około 560px szerokości. Czy jest to standard dla filmów z YouTube, czy jest coś, co mogę dodać do kodu, aby go zmniejszyć?
9 answers
Możesz sprawić, że filmy z YouTube będą responsywne za pomocą CSS. Zawiń ramkę iframe w div za pomocą klasy "videowrapper" i zastosuj następujące style:
.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%;
}
The .videowrapper div powinien znajdować się wewnątrz elementu reagującego. Wyściółka na ... videowrapper jest niezbędny, aby film nie zapadł się. Być może będziesz musiał dostosować liczby w zależności od układu.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-21 15:45:22
Jeśli używasz Bootstrap, możesz również użyć responsywnego osadzania. Pozwoli to w pełni zautomatyzować responsywność wideo.
Http://getbootstrap.com/components/#responsive-embed
Poniżej znajduje się przykładowy kod.
<!-- 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-11 12:44:52
Użyłem CSS w zaakceptowanej odpowiedzi tutaj dla moich responsywnych filmów YouTube-działało świetnie aż do momentu, gdy YouTube zaktualizował swój system około początku sierpnia 2015. Filmy na YouTube mają te same wymiary, ale z jakiegokolwiek powodu CSS w zaakceptowanej odpowiedzi teraz skrzynki na listy wszystkich naszych filmów. Czarne pasy w górnej i dolnej części.
Poukładałam się rozmiarami i postanowiłam pozbyć się górnej wyściółki i zmienić dolną wyściółkę na 56.45%
. Wygląda na to, że dobrze.
.videowrapper {
position: relative;
padding-bottom: 56.45%;
height: 0;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-14 14:32:18
Udoskonalone rozwiązanie Javascript tylko dla YouTube i Vimeo przy użyciu 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();
});
Prosty w użyciu tylko z osadzeniem:
<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
Lub z responsywnym frameworkiem stylu, takim jak 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>
- opiera się na szerokości i wysokości iframe, aby zachować proporcje
- może używać proporcji dla szerokości i wysokości (
width="16" height="9"
) - czeka, aż dokument będzie gotowy przed zmianą rozmiaru
- używa selektora jQuery substring
*=
zamiast początku łańcucha^=
- pobiera szerokość odniesienia z rodzica iFrame wideo zamiast predefiniowanego elementu
- Javascript solution
- No CSS
- nie potrzeba owijarki
Dzięki @Dampas za punkt wyjścia. https://stackoverflow.com/a/33354009/1011746
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:03:05
To jest stary wątek, ale znalazłem nową odpowiedź na https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
Problem z poprzednim rozwiązaniem polega na tym, że musisz mieć specjalny div wokół kodu wideo, który nie nadaje się do większości zastosowań. Więc tutaj jest rozwiązanie JavaScript bez specjalnego 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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-26 19:27:57
@magi182 rozwiązanie jest solidne, ale nie ma możliwości ustawienia maksymalnej szerokości. Myślę, że maksymalna szerokość 640px jest konieczna, ponieważ w innym przypadku miniaturka youtube wygląda pikselowo.
Moje rozwiązanie z dwoma opakowaniami działa jak urok dla mnie:
.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>
Ustawiłem również padding-bottom w wewnętrznym opakowaniu na 50%, ponieważ przy 56% @ magi182 pojawił się czarny pasek na górze i na dole.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-06 13:50:16
Zobacz pełny gist tutaj i przykład na żywo tutaj .
#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 jest wywoływany dopiero po pełnym załadowaniu odtwarzacza Youtube (na załadowanie strony nie działa), i za każdym razem, gdy okno przeglądarki jest zmieniany rozmiar. Po uruchomieniu oblicza wysokość i szerokość ramki iframe i przypisuje odpowiednie wartości zachowując poprawny współczynnik kształtu. Działa to niezależnie od tego, czy okno jest zmieniane poziomo czy pionowo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-04 23:51:38
/ Align = "center" bgcolor = "# e0ffe0 " / cesarz chin / / align = center /
Dlaczego nie dodać width: 100%;
bezpośrednio do iframe. ;)
Więc Twój kod będzie wyglądał jak <iframe style="width: 100%;" ...></iframe>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-26 07:42:23
Robię to za pomocą prostego css w następujący sposób
KOD HTML
<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>
KOD CSS
<style type="text/css">
#vid {
max-width: 100%;
height: auto;
}