Responsywne wideo na pełnym ekranie YouTube bez czarnych pasków?

Question

Mam pełnoekranowe wideo z YouTube umieszczone na mojej stronie.

To wygląda dobrze, gdy wielkość przeglądarce jest proporcjonalny do szerokości filmu i wysokość. Jednak po zmianie rozmiaru przeglądarki na inną proporcję, uzyskuję czarne paski wokół wideo.

Chcę to mieć film wypełnić całe okno w każdym czasie, ale bez rozciągania. Chcę, aby "nadmiar" się ukrywał, gdy rozmiar przeglądarki nie jest proporcjonalny do wideo.

To, co próbuję osiągnąć, to coś, co można zobaczyć na tle tych dwóch witryn: http://ginlane.com/ i http://www.variousways.com/.

Czy można to zrobić z filmem youtube?

Answer 1

• Sprawdź to: Fullscreen video without black borders
• Albo to: http://avexdesigns.com/responsive-youtube-embed/
• Albo ten: http://css-tricks.com/fluid-width-youtube-videos/

Answer 2

To jest dość stary, ale ludzie wciąż potrzebują pomocy tutaj. Też potrzebowałem tego, więc stworzyłem pióro mojego rozwiązania, które powinno pomóc - http://codepen.io/MikeMooreDev/pen/QEEPMv

W przykładzie pokazano dwie wersje tego samego filmu, jeden w standardzie, a drugi przycięty i wyśrodkowany, aby pasował do rozmiaru pełnego elementu rodzica bez pokazywania ohydnych czarnych pasków.

Musisz użyć trochę javascript, aby obliczyć nową szerokość wideo, ale to naprawdę proste, jeśli znasz współczynnik proporcji.

HTML

<div id="videoWithNoJs" class="videoWrapper"> 
    <iframe src="https://www.youtube.com/embed/ja8pA2B0RR4" frameborder="0" allowfullscreen></iframe> 
</div> 

CSS - Wysokość i szerokość o tym videoWrapper może być dowolna, mogą być procenty, jeśli sobie tego życzą

.videoWrapper { 
    height:600px; 
    width:600px; 
    position:relative; 
    overflow:hidden; 
} 

.videoWrapper iframe { 
    height:100%; 
    width:100%; 
    position:absolute; 
    top:0; 
    bottom:0; 
} 

jQuery

$(document).ready(function(){ 
    // - 1.78 is the aspect ratio of the video 
    // - This will work if your video is 1920 x 1080 
    // - To find this value divide the video's native width by the height eg 1920/1080 = 1.78 
    var aspectRatio = 1.78; 

    var video = $('#videoWithJs iframe'); 
    var videoHeight = video.outerHeight(); 
    var newWidth = videoHeight*aspectRatio; 
    var halfNewWidth = newWidth/2; 

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"}); 

}); 

Może to być również wyzwalane przy zmianie rozmiaru, aby zapewnić, że pozostanie ono responsywne. Najłatwiejszym (prawdopodobnie nie najbardziej wydajnym) sposobem na zrobienie tego jest poniższy.

$(window).on('resize', function() { 

    // Same code as on load   
    var aspectRatio = 1.78; 
    var video = $('#videoWithJs iframe'); 
    var videoHeight = video.outerHeight(); 
    var newWidth = videoHeight*aspectRatio; 
    var halfNewWidth = newWidth/2; 

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"}); 

}); 

Answer 3

Niestety to nie wydają się działać .... O ile ja czegoś brakuje: http://codepen.io/Archie22is/pen/EWWoEM

jQuery(document).ready(function($){ 
    // - 1.78 is the aspect ratio of the video 
    // - This will work if your video is 1920 x 1080 
    // - To find this value divide the video's native width by the height eg 1920/1080 = 1.78 
    var aspectRatio = 1.78; 

    var video = $('#videoWithJs iframe'); 
    var videoHeight = video.outerHeight(); 
    var newWidth = videoHeight*aspectRatio; 
    var halfNewWidth = newWidth/2; 

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"}); 

}); 

Answer 4

jestem delegowania tego powodu odpowiedzi powyżej są dla gdy masz czarne paski u góry iu dołu. Co jeśli masz paski po bokach (z lewej i prawej strony). Ten skrypt zajmie się dwoma scenariuszami.

var vidRatio = vidWidth/vidHeight; 
var wrapperHeight = $('#videoIFrameContainer').height(); 
var wrapperWidth = $('#videoIFrameContainer').width(); 
var wrapperRatio = wrapperWidth/wrapperHeight; 
if(wrapperRatio < vidRatio){ 
    var newWidth = wrapperWidth * (vidRatio/wrapperRatio); 
    $('#videoIFrame').css({'min-height':wrapperHeight+'px', 'min-width':newWidth+'px', 'position':'absolute', 'left':'50%','margin-left':'-'+(newWidth/2)+'px'}); 

} 
else{ 
    var newHeight = wrapperHeight * (wrapperRatio/vidRatio); 
    $('#videoIFrame').css({'min-height':newHeight+'px', 'min-width':wrapperWidth+'px', 'position':'absolute', 'top':'50%','margin-top':'-'+(newHeight/2)+'px'}); 

} 

Answer 5

Spędziłem dużo czasu, próbując to zrozumieć, ale tutaj jest proste rozwiązanie CSS, które działa dla mnie przy użyciu Flexbox. Zasadniczo, umieść wideo w pojemniku z pozycją bezwzględną, a szerokość i wysokość w 100% i spraw, by było wyświetlane: wygnij i wyśrodkuj zawartość!

https://medium.com/@rishabhaggarwal2/tutorial-how-to-do-full-screen-youtube-video-embeds-without-any-black-bars-faa778db499c

Answer 6

Można również użyć tego poniżej: -

<iframe class="" style="background:url(ImageName.jpg) center; background-size: 100% 140%; " allowfullscreen="" width="300" height="200"></iframe> 

Answer 7

Tworzenie div kontenera wokół kodu iframe i nadać mu klasy np

<div class="video-container"><iframe.......></iframe></div> 

dodać w CSS :

.video-container { 
    position:relative; 
    padding-bottom:56.25%; 
    padding-top:30px; 
    height:0; 
    overflow:hidden; 
} 

.video-container iframe, .video-container object, .video-container embed { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 

Ten coolestguidesontheplanet.com jest źródłowym adresem URL tej odpowiedzi.