Siyah çubukları olmayan tam ekran youtube video Duyarlı mı?

Question

Web sitemde gömülü tam ekran youtube video var. Tarayıcının boyutu videonun genişliği ve yüksekliği ile orantılı olduğunda

iyi görünüyor. Ancak, tarayıcıyı farklı bir oranda yeniden boyutlandırdığımda, videonun etrafında siyah çubuklar olur. Benim istediğim

Video sürelerde, tüm pencereyi dolduracak sahip olmaktır, ancak herhangi bir zorlamadan. Tarayıcı boyutu videoyla orantılı olmadığında “fazla” nın gizlenmesini istiyorum.

Neyi başarmaya çalıştığım, şu iki web sitesinin arka planda görebileceğiniz bir şeydir: http://ginlane.com/ ve http://www.variousways.com/.

Bunu bir youtube videosu ile yapmak mümkün mü?

Answer 1

• Kontrol bu: Fullscreen video without black borders
• Ya da bu: http://avexdesigns.com/responsive-youtube-embed/
• Veya bu bir: http://css-tricks.com/fluid-width-youtube-videos/

Answer 2

Bu oldukça eski ama insanlar hala burada yardımcı gerekebilir. Buna da ihtiyacım olan bir çözümümün yaratılmasına yardımcı olan bir Kalem yarattım - http://codepen.io/MikeMooreDev/pen/QEEPMv

Örnek, aynı videonun iki versiyonunu, biri standart olarak ve ikinci kırpılmış ve merkezi olarak hizalanmış, tam ana öğenin boyutuna sığacak şekilde çirkin siyah çubukları göstermeden.

Video için yeni bir genişlik hesaplamak için bazı javascript kullanmanız gerekir, ancak en boy oranını biliyorsanız, bu gerçekten kolaydır.

HTML

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

CSS - videoWrapper o yükseklik ve genişlik herhangi bir şey olabilir, onlar istedikleri takdirde yüzdeler olabilir

.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"}); 

}); 

Bu can Ayrıca, yanıt vermeye devam etmesini sağlamak için yeniden boyutlandırma sırasında tetiklenir. Bunu yapmanın en kolay yolu (muhtemelen en verimli değil) aşağıdaki gibidir.

$(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

Ne yazık ki bu bir şey eksik sürece .... çalışıyor gibi görünmüyor: 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

sen varken cevaplar yukarıda içindir çünkü bu post ediyorum üstte ve altta siyah çubuklar. Ya yanlarda çubuklar varsa (sol ve sağ). Bu senaryo iki senaryoya dikkat edecek.

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

Bunu anlamaya çalışırken çok zaman harcadım, ancak burada Flexbox'ı kullanan basit bir CSS çözümü var. Temel olarak, videoyu% 100 mutlak ve genişlik ve yüksekliğe sahip bir kapsayıcıya koyun ve görüntüyü oluşturun: esnek ve içeriği ortalayın!

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

Answer 6

Ayrıca aşağıda bu kullanabilirsiniz: -

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

Answer 7

iframe kodu etrafında bir kapsayıcı div oluşturma ve bunu bir sınıf örneğin verin:

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

CSS'deki ekle :

.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%; 
} 

Bu coolestguidesontheplanet.com, bu cevabın Kaynak URL'si.