J'essaie d'aligner la vidéo intégrée YouTube au centre de la page de ma page Bootstrap. La taille de la vidéo est toujours la même.
Mon HTML a l'air vraiment simple: P>
width: 50%; margin: 0 auto;
11 Réponses :
Une chose importante à noter / "bootstrap" est juste un tas de règles CSS
un violon a> p> Entièrement de travail jsfiddle est ici . P> html h2>
p> CSS h1>
Edit h3> Je l'utilise surtout ces jours-ci: P>
CSS droit H2>
center-center()
absolute()
margin auto
top 50%
left 50%
transform translate(-50%,-50%)
Et voici une avec une vidéo: Jsfiddle.net/SheriffDerek/glr5s/3 - - Si vous voulez être plus réactif, vous devez regarder FITVIDS pour traiter les proportions vidéo. J'espère que cela aide, mais j'imagine qu'il y a des tonnes de styles de bootstrap qui pourraient gâcher cela.
Merci. C'est le grand progrès de ce que j'avais précédemment. Le problème est que je n'en ai pas besoin d'être centré verticalement et que le texte précédent et suivant est caché derrière la vidéo. Par exemple, jsfiddle.net/glr5s/5 . Une fois de plus, merci d'avoir examiné mon problème.
Cela rend les choses un journal plus facile alors. BOOSTRAP a une classe idiote appelée élément-bloc-block-élément ou quelque chose --- mais il est juste de la marge automatique à droite et à gauche et probablement flotter: aucun; ou quelque chose.
Cool merci. Cela fonctionne parfaitement dans chaque appareil.
REMARQUE: Dans la version droite CSS, il y a un semi-points (; ) après la suite Marge: Auto
@RayMitchell - a eu.
<center><div class="video"> <iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe> </div></center> It seems to work, is this all you were asking for? I guess you could go about taking longer more involved routes, but this seemed simple enough.
La balise
Je définit la largeur maximale pour que ma vidéo soit 100%. Sur téléphones, la vidéo correspond automatiquement à la largeur de l'écran. Étant donné que la vidéo intégrée n'est que 560px de large, je viens d'ajouter une marge gauche de 10% à l'IFrame et mettez un dos "0" dans la marge pour le CSS mobile (pour permettre la vue complète de la largeur). Je ne voulais pas me déranger de mettre un div des environs de chaque vidéo ...
Desktop CSS: P>
p>
iframe {
margin-left: 0;
} Utilisation de bootstrap's intégré à ou à l'aide de l'intégré .center-bloc code> a > classe, qui définit la marge à gauche et à droite de auto code>: .Text-centre code> classe, qui définit text-align: Centre Code>: P> <div class="text-center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>
YouTube utilise iframe. Vous pouvez simplement la définir sur:
iframe {
display: block;
margin: 0 auto;
}
Il serait utile que vous puissiez mettre un contexte autour de votre réponse, par exemple pourquoi est-il préféré sur d'autres méthodes, pourquoi résoudre le problème, etc.
<iframe style="display: block; margin: auto;" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen></iframe>
Vous n'avez pas à mettre
<div>
<iframe id="myFrame" src="https://player.vimeo.com/video/12345678?autoplay=1" width="640" height="360" frameborder="0" allowfullscreen> .
</iframe>
</div>
<script>
function myFunction() {
var wscreen = window.innerWidth;
var hscreen = window.innerHeight;
document.getElementById("myFrame").width = wscreen ;
document.getElementById("myFrame").height = hscreen ;
}
myFunction();
window.addEventListener('resize', function(){ myFunction(); });
</script>
this works on Vimeo adding an id myFrame to the iframe
faire iframe avec align = "milieu" et le mettre en paragraphe avec style = "text-align: centre":
Pour une vidéo YouTube iframe entièrement réactive, essayez ceci:
<div class="blogwidevideo">
<iframe width="854" height="480" style="margin: auto;" src="https://www.youtube-nocookie.com/embed/h5ag-3nnenc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
.blogwidevideo {
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.blogwidevideo iframe {
left:10%; //centers for the 80% width - not needed if width is 100%
top:0;
height:80%; //change to 100% if going full width
width:80%;
position:absolute;
}
Le moyen le plus simple consiste à ajouter une balise, avant, ouvrez la balise, puis fermez-la après la fermeture. Comme indiqué par les autres tags n'est pas pris en charge par HTML5, et même votre IDE montrerait une erreur. J'utilise le code VS et oui, il affiche une erreur, mais si vous vérifiez votre site Web, la vidéo serait au centre. YouTube comprend toujours la balise :)
Vous voulez juste aligner un div au centre de l'écran avec CSS, non? Est-ce que c'est une vidéo ou que vous utilisez Bootstrap pertinent de toute façon que vous n'êtes pas suggéré dans votre question?
@sheriffDerek Je veux aligner la vidéo YouTube au centre. J'ai vu comment aligner Div, mais quand j'ai essayé d'utiliser cette solution, je n'ai rien capable d'atteindre quoi que ce soit. Bootstrap pourrait être pertinent, car elle a elle-même créé de nombreux styles CSS, il pourrait donc y avoir un moyen d'utiliser l'un de leurs styles.
Utilisez-vous Fitvids.js du tout?
@SheriffDerek non, n'a même pas entendu parler de cela.