Comment puis-je adapter le lecteur YouTube à la largeur de la page tout en conservant les proportions?
J'ai une vidéo YouTube que je veux mettre sur ma page Web.
Je souhaite adapter la vidéo à un pourcentage du navigateur de l'utilisateur, mais également conserver le rapport de format.
J'ai essayé ceci:
<iframe width="87%" height="315" src="http://www.youtube-nocookie.com/embed/dU6OLsnmz7o" frameborder="0" allowfullscreen></iframe>
Mais cela ne fait que rendre le joueur plus large, pas plus haut.
Dois-je avoir recours à JavaScript (ou à un CSS non standard)?
Je rencontre un problème similaire avec mon site lors du développement de CSS réactif. Je souhaitais que tous les objets Youtube incorporés soient redimensionnés, avec leur aspect, lors du passage du CSS de bureau à quelque chose de plus petit (j'utilise des requêtes multimédia pour restituer le contenu pour les appareils mobiles).
La solution sur laquelle j'ai opté était le CSS et le balisage. En gros, j'ai trois classes de vidéos dans mon CSS:
.video640 {width: 640px; height: 385px}
.video560 {width: 560px; height: 340px}
.video480 {width: 480px; height: 385px}
… Et j'assigne l'un d'entre eux au contenu Youtube que j'inclus, en fonction de sa taille d'origine (vous aurez peut-être besoin de plus de classes, je viens de choisir les tailles les plus courantes).
Dans la requête multimédia CSS pour les plus petits périphériques, ces mêmes classes sont simplement reformulées comme suit:
.video640 {width: 230px; height: 197px}
.video560 {width: 230px; height: 170px}
.video480 {width: 240px; height: 193px}
J'apprécie le fait que cela nécessite des balises "initiales" lors de l'inclusion de vidéos dans votre code HTML (c'est-à-dire l'ajout d'une classe), mais si vous ne voulez pas suivre la route Javascript, cela fonctionne assez Énoncez vos classes de vidéos pour autant de tailles différentes que vous le souhaitez. Voici à quoi ressemble le balisage Youtube:
<object class="video640" type="application/x-shockwave-flash" value="YOUTUBE URL">
<param name="movie" value="YOUTUBE URL"></param>
</object>
Ce que je crois être la meilleure solution CSS.
.auto-resizable-iframe {
max-width: 420px;
margin: 0px auto;
}
.auto-resizable-iframe > div {
position: relative;
padding-bottom: 75%;
height: 0px;
}
.auto-resizable-iframe iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
<div class="auto-resizable-iframe">
<div>
<iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>
</div>
Assez facile avec du javascript.
jQuery(function() {
function setAspectRatio() {
jQuery('iframe').each(function() {
jQuery(this).css('height', jQuery(this).width() * 9/16);
});
}
setAspectRatio();
jQuery(window).resize(setAspectRatio);
});
Ce plugin jQuery fait le tour depuis quelque temps, il s'appelle FitVids et fait exactement ce dont vous avez besoin, redimensionne les vidéos en fonction de la taille du navigateur, tout en conservant les proportions.
Le truc pour faire un redimensionnement automatique d'une vidéo youtube est de rendre la largeur de l'iframe à 100% et de la placer dans une div avec un "padding-bottom" égal au rapport de format en pourcentage. Par exemple.
Mais le problème est que vous auriez déjà beaucoup de pages avec des vidéos YoutTube intégrées. Voici un plugin jquery qui va scanner toutes les vidéos de la page et les redimensionner automatiquement en changeant le code iframe pour qu'il soit comme ci-dessus. Cela signifie que vous ne devez changer aucun code. Incluez le javascript et toutes vos vidéos YouTube deviennent de la taille automatique . https://skipser.googlecode.com/files/youtube-autoresizer.js
Vous pouvez utiliser deux classes permettant de redimensionner la taille de la vidéo en fonction de la taille de la division d'habillage. Considérons cet exemple:
<div class="content-wrapper">
<div class="iframe-wrapper res-16by9">
<iframe src="https://www.youtube.com/embed/pHsYFURtzzY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Maintenant, regardez le css.
.content-wrapper{
max-width: 800px;
margin: 0 auto;
background-color: #fff;
}
.iframe-wrapper{
width: 100%;
position: relative;
}
.res-4by3{
padding-bottom: 75%;
}
.res-16by9{
padding-bottom: 56.25%;
}
.iframe-wrapper iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Notez que vous devrez envelopper l'iframe dans un div dont la largeur est définie sur 100% et la position sur relative. Vous devez également ajouter une marge de remplissage inférieure au wrapper d'iframe. Ce rembourrage définira la hauteur d'une vidéo. Je recommande de créer deux classes qui représenteront le rapport d'image.
Il est assez facile de calculer le remplissage inférieur droit pour les wrappers qui représentent une certaine résolution. Par exemple, pour les résolutions 4 sur 3 et 16 sur 9, le remplissage du bas est égal à:
[4/3 res]
100/4 * 3 = 75%;
[16/9 res]
100/16 * 9 = 56,25%
Positionnez ensuite l'iframe en tant qu'absolu et poussez-le vers le coin supérieur gauche du div enveloppant. Veillez également à définir la largeur et la hauteur de l’iframe sur 100%. Maintenant, vous devez faire une dernière chose. Vous avez terminé.
Ajoutez la classe qui correspond à la bonne résolution pour vous. Elle redimensionnera la largeur et la hauteur de l’image en maintenant les bonnes proportions.
L'exemple ci-dessus fonctionne pour n'importe quel iframe. Cela signifie que vous pouvez également l'utiliser pour Google Maps iframe.
Ancienne question, mais je pense que les balises @media CSS 3 seraient utiles dans ce cas.
Voici ma solution à un problème similaire.
Le CSS:
@media only screen and (min-width: 769px) {
.yVid {
width: 640px;
height: 360px;
margin: 0 auto;
}
}
@media only screen and (max-width: 768px) {
.yVid {
width: 560px;
height: 315px;
margin: 0 auto;
}
}
Le HTML:
<div class="yVid">
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>
Cela ajoute essentiellement un point d'arrêt à 768px où la vidéo se redimensionne. Vous pouvez également ajouter des points d'arrêt à 992 et 1280 pour une taille vidéo encore plus performante. (nombres basés sur les tailles standard Bootstrap).
C'est ce qui a fonctionné pour moi. Il s'agit d'un code légèrement modifié à partir du Générateur de code intégré YouTube .
Le CSS:
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.27198%;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Le HTML:
<div class="video-container">
<iframe width="560px" height="315px" src="https://www.youtube.com/embed/XXXXxxxx?&theme=dark&autohide=2&iv_load_policy=3"><iframe>
</div>
Outre Darwin et Todd, la solution suivante consistera à:
- éviter la marge inférieure
- maximiser la largeur pour les grands écrans
- minimiser la hauteur en mode mobile
- conserver une taille fixe pour les navigateurs @media none compatibles
Le HTML:
<div class="video_player">
<div class="auto-resizable-iframe">
<div>
<iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"> </iframe>
</div>
</div>
</div>
Le CSS:
.videoplayer{
text-align: center;
vertical-align: middle;
background-color:#000000;
margin: 0;
padding: 0;
width: 100%;
height:420px;
overflow:hidden;
top: 0;
bottom: 0;
}
.auto-resizable-iframe {
width:100%;
max-width:100%;
margin: 0px auto;
}
.auto-resizable-iframe > div {
position: relative;
padding-bottom:420px;
height: 0px;
}
.auto-resizable-iframe iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
//full screen
@media (min-width:0px) {
.videoplayer{
height:100%;
}
.auto-resizable-iframe > div {
padding-bottom:100%;
}
}
//mobile/pad view
@media (min-width:600px) {
.videoplayer{
height:420px;
}
.auto-resizable-iframe > div {
padding-bottom:420px;
}
}
Vous pouvez utiliser style="max-width: %87; max-height: %87;"
Il existe quelques suggestions dans la liste des réponses pour utiliser js pour modifier la structure de l’iframe généré. Je pense que cela présente un risque, car lorsque vous encapsulez l'iframe dans d'autres éléments, il est possible que l'API YouTube perde la connexion avec l'iframe (surtout si vous transmettez l'élément en tant que nœud au lieu d'utiliser un identifiant spécifique comme moi) . C’est plutôt pour contourner le problème, utilisez javascript pour modifier le contenu avant de déclencher le lecteur youtube.
un extrait de mon code:
/**
* Given the player container, we will generate a new structure like this
*
* <div class="this-is-the-container">
* <div class="video-player">
* <div class="auto-resizable-iframe">
* <div>
* <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"> </iframe>
* </div>
* </div>
* </div>
* </div>
*
* @return {Node} the real player node deep inside
*/
YouTube.renderResizable = function (playerContainer) {
// clean up the content of player container
playerContainer.textContent = '';
var playerDiv = document.createElement('div');
playerDiv.setAttribute('class', 'video-player');
playerContainer.appendChild(playerDiv);
// add the auto-resizable-frame-div
var resizeableDiv = document.createElement('div');
resizeableDiv.setAttribute('class', 'auto-resizable-iframe');
playerDiv.appendChild(resizeableDiv);
// create the empty div
var div = document.createElement('div');
resizeableDiv.appendChild(div);
// create the real player
var player = document.createElement('div');
div.appendChild(player);
return player;
};