Réduire une vidéo Youtube à la largeur de réponse

Question

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 large. Cette norme concerne-t-elle les vidéos Youtube ou puis-je ajouter quelque chose au code pour le rendre plus petit?

Le site est: http://www.jamonit.org/

La vidéo est sur la page d'accueil.

Answer 1

Les vidéos Youtube peuvent être réactives. Enveloppez l'iframe dans une 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 à l’intérieur d’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 mise en page.

Answer 2

Voir tous les gist ici et vivent exemple 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ée que lorsque le lecteur Youtube est entièrement chargée (au 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 largeur et la hauteur de l'iframe et affecte les valeurs appropriées de maintenir le ratio d'aspect correct. Cela fonctionne si la fenêtre est redimensionnée à l'horizontale ou à la verticale.