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

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?

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.

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>

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

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

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

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.

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>

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.

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

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;

}