
Si jamais inséré un vidéo de YouTube dans certains de vos sites Web Vous avez peut-être remarqué que la vidéo est un largeur fixe et ce n’est pas réactif Lorsque vous modifiez la taille le navigateur ou lorsque vous voyez vos pages Web à partir d’autres dispositifs de avec différentes tailles d’écran (Mobile, comprimés,…).
Dans un article précédent nous avons vu comme vous pouvez insérer une vidéo Youtube directement dans votre page web, et si vous utilisez WordPress, sans n’importe quel type de plugin.
Pour cela le Largeur d'un vidéo inséré, à partir du code HTML que Youtube nous da, est réactif, la première chose que nous ferons est mises ce code à l’intérieur d’un DIV.
1 2 3 4 5 6 7 | <div class="contenedor"> <iframe src="http://www.youtube.com/embed/NUsoVlDFqZg" frameborder="0" allowfullscreen="allowfullscreen" class="video"> </iframe> </div> |
Vous pouvez utiliser le code montré ici, et remplacer le Itinéraire le long de la route que vous donnez YouTube la vidéo que vous souhaitez Insérer. Veuillez noter que vous devez attribuer la classe vidéo à l’élément IFRAME.
Puis, dans votre fichier CSS correspondant, ou directement sur un élément STYLE sur la même page, Nous allons affecter des attributs de style pour la classe conteneur et vidéo.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .contenedor { position: relative; height: 0px; width: 100%; padding-bottom: 56.25%; } .video { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } |
Une fois ce code a été saisi, If Actualisation encore une fois la page où vous avez inséré la vidéo, vérifier Maintenant, c’est s’ajuste à la Largeur de la DIV Il contient. Oui est DIV se trouve directement au-dessus de la CORPS, vous verrez qu'il remise à zéro à la largeur de l’écran.

« Une pensée sur »Comment rendre sensible ou réglable, pleine largeur, une vidéo intégrée de Youtube”
M’a beaucoup aidé, Rechercher sur beaucoup de pages et rien! Cet allégement , Merci beaucoup <3