web-dev-qa-db-fra.com

Vidéo YouTube plein écran responsive sans barres noires?

J'ai une vidéo YouTube en plein écran intégrée à mon site Web.

enter image description here

Il semble bon lorsque la taille du navigateur est proportionnelle à la largeur et à la hauteur de la vidéo. Cependant, lorsque je redimensionne le navigateur dans une proportion différente, j'obtiens des barres noires autour de la vidéo.

enter image description here

Ce que je veux, c'est que la vidéo remplisse toute la fenêtre à tout moment, mais sans étirement. Je veux que "l'excès" se cache lorsque la taille du navigateur n'est pas proportionnelle à la vidéo.

Ce que j'essaie de réaliser est quelque chose que vous pouvez voir en arrière-plan de ces deux sites Web: http://ginlane.com/ et http://www.variousways.com/ .

Est-il possible de le faire avec une vidéo youtube?

htmlcssvideoyoutube
22
Owly
4
Daniel Patilea

C'est assez vieux mais les gens peuvent encore avoir besoin d'aide ici. J'en avais également besoin, alors j'ai créé un stylo de ma solution qui devrait aider - http://codepen.io/MikeMooreDev/pen/QEEPMv

L'exemple montre deux versions de la même vidéo, une en standard et la seconde recadrée et alignée au centre pour s'adapter à la taille de l'élément parent complet sans afficher les barres noires hideuses.

Vous devez utiliser du javascript pour calculer une nouvelle largeur pour la vidéo, mais c'est vraiment facile si vous connaissez le rapport d'aspect.

HTML

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

CSS - La hauteur et la largeur du videoWrapper peuvent être n'importe quoi, elles peuvent être des pourcentages si vous le souhaitez

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

});

Cela peut également être déclenché lors du redimensionnement pour garantir qu'il reste réactif. La façon la plus simple (probablement pas la plus efficace) de procéder est la suivante.

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

});
9
Mike

Créez un conteneur div autour du code iframe et donnez-lui une classe par exemple:

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

Ajoutez dans le 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%;
}

Ce coolestguidesontheplanet.com est l'URL source de cette réponse.

8
Jithu Wilson C

Pour simuler le même effet, l'important est de maintenir un rapport hauteur/largeur qui est de 16: 9.

HTML

<div class="banner-video">    
        <iframe  src="https://www.youtube.com/embed/XXlJXRXJhow?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;mute=1&amp;loop=1&amp;playlist=XXlJXRXJhow" frameborder="0" allow="autoplay; encrypted-media" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div>

CSS

iframe{
  width: 100%;
  height: calc((100vw*9) /16);
}

Cela supprimera les barres noires.

Nous pouvons maintenant définir le conteneur extérieur sur 100% de largeur et 100% de hauteur et masquer le débordement.

.banner-video{
  height: 100vh;
  overflow: hidden;
}

Maintenant, le code ci-dessus fonctionnera jusqu'à ce que le rapport d'aspect de la fenêtre soit supérieur à 16/9. Nous devons donc ajouter une requête multimédia en fonction du rapport d'aspect.

 @media (max-aspect-ratio: 16/9) {
    .banner-video{
      width: 100%;
      overflow: hidden;
    }

    iframe{
      width: calc((100vh*16)/9);
      height: 100vh;
      }
  }

Après cette vidéo YouTube, la taille de la fenêtre d'affichage sera conservée dans toutes les conditions et masquera la partie supplémentaire d'une vidéo. Autre que opera il est pris en charge dans tous les navigateurs.

5
kushal parikh

J'ai passé beaucoup de temps à essayer de comprendre cela, mais voici une solution CSS simple qui fonctionne pour moi en utilisant Flexbox. Fondamentalement, mettez la vidéo dans un conteneur avec une position absolue et une largeur et une hauteur de 100% et faites-la afficher: fléchissez et centrez le contenu!

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

1
CreativeR

Je poste ceci parce que les réponses ci-dessus sont pour quand vous avez les barres noires en haut et en bas. Et si vous avez les barres sur les côtés (gauche et droite). Ce script prendra en charge les deux scénarios.

    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'});

}
1
Tosin John

Malheureusement, cela ne semble pas fonctionner .... Sauf s'il me manque quelque chose: 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"});

});
0
user1616270

Vous pouvez également utiliser ceci ci-dessous: -

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

Si vous recherchez uniquement du CSS (pas de JS).

Vidéos au format 16: 9 telles que 1920x1080 ou 1280x720 ...

Voici mon code (ça marche dans mon cas):

.video {
    position: relative;
    height: 0; 
    padding-bottom: 56.25%; /*16:9*/
    padding-top: 0; /* Use ZERO, not 25px or 30px and so on */
    overflow: hidden;
}

.video > iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
0
Luciano Laranjeira