Intégrer correctement la vidéo Youtube dans la page bootstrap 3.0

Je dois intégrer une vidéo YouTube dans mon site responsive, mais elle ne fonctionne pas correctement, en particulier sur les mobiles. Il semble correct sur les ordinateurs de bureau et les tablettes, mais une fois que la largeur de la fenêtre d’affichage est inférieure à 600, la vidéo casse son conteneur. Pour afficher la totalité de la vidéo sur mobile, vous devez effectuer un pincement au point que le rest du contenu ne remplisse que la moitié de l’écran verticalement. Pas si bon.

Je souhaite que le contenu du texte soit 1/3 de largeur et que la vidéo soit large de 2/3 sur les ordinateurs de bureau et les tablettes et empilée sur mobile avec la vidéo et le contenu à la fois à 100% de la largeur de la fenêtre d’affichage. J’ai essayé d’utiliser width = “100%” sur l’iframe, mais la hauteur ne change pas correctement lorsque vous redimensionnez et que la vidéo soit étirée ou écrasée.

Je dois aussi le faire avec CSS uniquement car je dépose simplement mes feuilles de style sur le stock bootstrap 3.0.

Voici mon code:

Content. This is content, it is not meant to be read or understood. Something random goes here, it can be whatever you want, it's just blankish content provided so that it fills up some space, pretty boring huh?

Il existe une solution native Bootstrap3: http://getbootstrap.com/components/#responsive-embed

depuis Bootstrap 3.2.0!

Si vous utilisez Bootstrap

Je sais qu’il est tard, j’ai le même problème avec un vieux thème personnalisé, juste ajouté à boostrap.css:

 .embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; } .embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } .embed-responsive-16by9 { padding-bottom: 56.25%; } .embed-responsive-4by3 { padding-bottom: 75%; } 

Et pour la vidéo:

 

Pensez à emballer les vidéos dans quelque chose que vous pouvez rendre flexible via bootsrap.

Le bootstrap n’est pas un outil magique, c’est juste un moteur de mise en page. Vous l’avez presque dans votre exemple.

Utilisez simplement la grid fournie par bootstrap et supprimez les dimensionnements ssortingcts sur l’iframe. Utilisez les guides de la classe bootstrap pour la grid.

Par exemple:

  

Vous verrez comment la classe de l’iframe changera alors compte tenu de votre résolution.

Un violon aussi: http://jsfiddle.net/RsSAT/

Cela dépend aussi de la façon dont vous stylisez votre site avec bootstrap. Dans mon exemple, j’utilise col-md-12 pour mon div vidéo, et j’ajoute la classe col-sm-12 pour l’iframe, de sorte que lorsque la taille est réduite, la vidéo ne sera pas compressée. J’ajoute aussi de la hauteur à l’iframe:

 

J’utilise aussi bootstrap 3.x et le code suivant, pour que la vidéo youtube soit réactive, 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%; } 

J’ai donné une réponse similaire sur un autre sujet ( réduire une vidéo YouTube à une largeur sensible ), mais je suppose que mes réponses peuvent également aider.

Eh bien, il a une solution simple et facile. Vous pouvez facilement adapter votre vidéo à la taille de votre appareil et de votre écran. Voici le code HTML et CSS:

 .yt-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; } .yt-container iframe, .yt-container object, .yt-container embed { position:absolute; top:0; left:0; width:100%; height:100%; } 
 

Cela fonctionne bien pour moi …

  .delimitador{ width:100%; margin:auto; } .contenedor{ height:0px; width:100%; /*max-width:560px; /* Así establecemos el ancho máximo (si lo queremos) */ padding-top:56.25%; /* Relación: 16/9 = 56.25% */ position:relative; } iframe{ position:absolute; height:100%; width:100%; top:0px; left:0px; } 

et alors

 
// youtube code