Réduire une vidéo YouTube à une largeur réactive


125

J'ai une vidéo YouTube intégrée sur notre site Web et lorsque je réduis l'écran à la taille d'une tablette ou d'un téléphone, il cesse de rétrécir à environ 560 pixels de largeur. S'agit-il d'une norme pour les vidéos YouTube ou y a-t-il quelque chose que je peux ajouter au code pour le réduire?


1
Bonne ressource pour générer votre code d' intégration réactif
ThisClark

Réponses:


268

Vous pouvez rendre les vidéos YouTube réactives avec CSS. Enveloppez l'iframe dans un div avec la classe "videowrapper" et appliquez les styles suivants:

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

Le div .videowrapper doit être dans un élément responsive. Le remplissage sur le .videowrapper est nécessaire pour empêcher la vidéo de s'effondrer. Vous devrez peut-être modifier les chiffres en fonction de votre disposition.


Je vous remercie! J'ai dû ajouter une largeur: 100% à mon #contenu pour m'assurer que c'était un élément réactif.
MattM


1
dans mon cas, la vidéo n'apparaît pas lors de l'application de ce CSS.
basZero

5
l'explication détaillée sur le nombre 56.25%et 25pxpeut être lue sur alistapart.com/article/creating-intrinsic-ratios-for-video padding-bottom: 56.25% : Pour créer un rapport 16: 9, il faut diviser 9 par 16 (0,5625 ou 56,25%). padding-top: 25px: Pour éviter les problèmes avec le modèle de boîte cassée (IE5 ou IE6 en mode bizarreries), nous utilisons le padding-top plutôt que la hauteur pour créer de la place pour le chrome.
Tun


27

Si vous utilisez Bootstrap, vous pouvez également utiliser une intégration réactive. Cela automatisera entièrement la réactivité des vidéos.

http://getbootstrap.com/components/#responsive-embed

Il y a un exemple de code ci-dessous.

<!-- 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>

1
il vaut la peine d'ajouter que vous devez insérer ceux-ci à l'intérieur de certains col-sm ... etc. pour éviter de rendre la vidéo pleine largeur.
aube le

1
C'est incroyable
jastr

De plus, pour garder la vidéo centrée, n'oubliez pas d'utiliser le décalage. Par exemple:col-sm-8 col-sm-offset-2
Nicolas

9

J'ai utilisé le CSS dans la réponse acceptée ici pour mes vidéos YouTube responsives - a très bien fonctionné jusqu'à ce que YouTube mette à jour son système vers le début du mois d'août 2015. Les vidéos sur YouTube ont les mêmes dimensions, mais pour une raison quelconque, le CSS dans la réponse acceptée maintenant boîtes aux lettres toutes nos vidéos. Bandes noires en haut et en bas.

J'ai vérifié les tailles et décidé de me débarrasser du rembourrage supérieur et de changer le rembourrage inférieur en 56.45%. Semble bien.

.videowrapper {
    position: relative;
    padding-bottom: 56.45%;
    height: 0;
}

1
Juste une mise à jour à ce sujet - parfois, les anciennes images d'espace réservé utilisées sur les vidéos donnent l'impression qu'il y a encore des bandes noires en haut et en bas, mais les vidéos elles-mêmes ont l'air bien avec ce nouveau paramètre lorsque vous commencez à les lire. Grrr, merci YouTube.
McNab

1
Merci. Utilisation du padding-bottom: 50% supprime les barres noires du haut et du bas de la vidéo que j'utilise, bien qu'il semble que la vignette et la vidéo elle-même aient des rapports
MSC

8

Solution Javascript raffinée uniquement pour YouTube et Vimeo utilisant 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();
});

Simple à utiliser avec uniquement intégré:

<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>

Ou avec un cadre de style réactif comme 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>
  • Se fie à la largeur et à la hauteur de l'iframe pour préserver les proportions
  • Peut utiliser le rapport hauteur / largeur pour la largeur et la hauteur ( width="16" height="9")
  • Attend que le document soit prêt avant de redimensionner
  • Utilise le *=sélecteur de sous-chaîne jQuery au lieu du début de la chaîne^=
  • Obtient la largeur de référence du parent iframe de la vidéo au lieu de l'élément prédéfini
  • Solution Javascript
  • Pas de CSS
  • Aucun emballage nécessaire

Merci à @Dampas pour le point de départ. https://stackoverflow.com/a/33354009/1011746


Fonctionne parfaitement! Merci beaucoup :)
Laran Evans

CA aide. Surtout dans les cas où vous n'avez aucun contrôle sur les éléments HTML (mais JS) et ne pouvez pas définir de vidéo. Je vous remercie.
Kai Noack

Notez que cette solution liera l'événement de redimensionnement avec une fonction JavaScript, ce qui peut stresser le navigateur à mesure que d'autres événements sont ajoutés. N'oubliez pas que vous pouvez utiliser JavaScript pour envelopper l'iframe dans un div wrapper pour laisser le CSS gérer le style réactif et améliorer les performances.
railgun

J'ai essayé de nombreuses solutions. C'est la meilleure solution sur Internet pour rendre les vidéos YouTube réactives.
Dan Nick

1

Ceci est un ancien fil, mais j'ai trouvé une nouvelle réponse sur https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Le problème avec la solution précédente est que vous devez avoir un div spécial autour du code vidéo, ce qui ne convient pas à la plupart des utilisations. Voici donc une solution JavaScript sans div spécial.

// 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

1

La solution de @ magi182 est solide, mais elle n'a pas la possibilité de définir une largeur maximale. Je pense qu'une largeur maximale de 640px est nécessaire car sinon, la vignette youtube semble pixélisée.

Ma solution avec deux wrappers fonctionne comme un charme pour moi:

.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>

J'ai également mis le rembourrage en bas dans l'emballage intérieur à 50%, car avec les 56% de @ magi182, une barre noire en haut et en bas est apparue.


Cela a mieux fonctionné pour moi en essayant d'incorporer une vidéo réactive, mais spécifiez une largeur (la largeur maximale).
yougotiger

1

Avec crédits à la réponse précédente https://stackoverflow.com/a/36549068/7149454

Compatible Boostrap, ajustez la largeur de votre conteneur (300px dans cet exemple) et vous êtes prêt à partir:

<div class="embed-responsive embed-responsive-16by9" style="height: 100 %; width: 300px; ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LbLB0K-mXMU?start=1841" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"></iframe>
</div>

0

Voir l'essentiel ici et l' exemple en direct ici .

#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 n'est appelé qu'après le chargement complet du lecteur Youtube (le chargement de la page ne fonctionne pas) et chaque fois que la fenêtre du navigateur est redimensionnée. Lorsqu'il s'exécute, il calcule la hauteur et la largeur de l'iframe et attribue les valeurs appropriées en conservant le rapport hauteur / largeur correct. Cela fonctionne que la fenêtre soit redimensionnée horizontalement ou verticalement.


-1

Ok, ça ressemble à de grandes solutions.

Pourquoi ne pas ajouter width: 100%;directement dans votre iframe. ;)

Donc, votre code ressemblerait à quelque chose comme <iframe style="width: 100%;" ...></iframe>

Essayez ceci, cela fonctionnera comme cela a fonctionné dans mon cas.

Prendre plaisir! :)


5
Étant donné que cela ne redimensionne pas correctement la hauteur de la vidéo et affiche donc les commandes et les bandes noires, la réponse acceptée est une meilleure solution
CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

Comme c'est le point de départ pour créer des vidéos responsives avec des iframes intégrées, je pense que cette solution répond correctement à la question. Combinez cela avec un système de grille et la hauteur est le seul problème qui reste. => (largeur du conteneur / 12) * 9 = hauteur.
Tim Vermaelen

-2

Je fais cela avec un simple css comme suit

CODE HTML

<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>

CODE CSS

<style type="text/css">
#vid {

max-width: 100%;
height: auto;

}

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.