web-dev-qa-db-fra.com

Réduire une vidéo YouTube en largeur sensible

Une vidéo YouTube est 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 diminuer à environ 560 pixels de large. Cette norme concerne-t-elle les vidéos YouTube ou puis-je ajouter quelque chose au code pour le rendre plus petit?

youtuberesponsive-designembed
117
MattM

Vous pouvez rendre des vidéos YouTube réactives avec CSS. Enveloppez l'iframe dans une div avec la classe de "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 à l'intérieur d'un élément responsive. Le remplissage du fichier .videowrapper est nécessaire pour empêcher la vidéo de s’effondrer. Vous devrez peut-être modifier les chiffres en fonction de votre mise en page.

259
magi182

Si vous utilisez Bootstrap, vous pouvez également utiliser une version réactive. Cela automatisera entièrement la réactivation de la ou des vidéos.

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

Il y a quelques exemples 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>
26
illage4

J'ai utilisé le CSS dans la réponse acceptée ici pour mes vidéos YouTube réactives. Cela a très bien fonctionné jusqu'à ce que YouTube mette à jour son système, début 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. letterboxes toutes nos vidéos. Bandes noires en haut et en bas.

J'ai jonglé avec les tailles et décidé de supprimer le rembourrage supérieur et de le remplacer par 56.45%. Semble bien paraître.

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

Solution javascript unique pour YouTube et Vimeo avec 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 seulement intégrer:

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

Ou avec un framework de style responsive 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>
  • S'appuie sur la largeur et la hauteur de l'iframe pour préserver les proportions
  • Peut utiliser les proportions pour la largeur et la hauteur (width="16" height="9")
  • Attend que le document soit prêt avant de redimensionner
  • Utilise le sélecteur jQuery de la chaîne *= au lieu du début de la chaîne ^=
  • Obtient la largeur de référence du parent de la vidéo iframe 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

7
mindriot

C'est un vieux 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 code spécial autour du code vidéo, ce qui ne convient pas à la plupart des utilisations. Voici donc la solution JavaScript sans div spéciale.

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

La solution de @ magi182 est solide, mais il lui manque 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 pixellisée.

Ma solution avec deux emballages 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 réglé le fond de remplissage dans l'emballage intérieur à 50%, car avec 56% de @ magi182, une barre noire est apparue en haut et en bas.

1
Pascal Klein

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

0
davidcondrey

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

Compatible avec 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
Nick Kovalsky