Ich versuche, das eingebettete YouTube-Video in der Mitte der Seite in meiner Bootstrap-Seite auszurichten. Die Größe des Videos ist immer gleich.
Mein html sieht wirklich einfach aus:
%Vor%Ich habe versucht, verschiedene Lösungen von stackoverflow (die nur ein div, nicht ein Video Zentrierung), und das beste, was ich in der Lage war, war dies Geige .
Ich habe es bereits versucht solution1 , solution2 , solution3 aber ohne Ergebnis. Eine andere teilweise erfolgreiche Lösung war zu verwenden:
%Vor%Es funktionierte gut auf dem Desktop, aber auf dem iPad oder einem Telefon fehlgeschlagen (das Video ging teilweise außerhalb eines Bildschirms). Wie ist es möglich, das Video in Desktop / Tablet / Handy richtig zu zentrieren?
Eine wichtige Sache zu beachten / "Bootstrap" ist nur eine Reihe von CSS-Regeln
Voll funktionsfähig jsFiddle ist hier .
Ich benutze das meistens heutzutage:
Auf diese Weise ... müssen Sie die Größe des Elements nicht kennen - und die Übersetzung basiert auf ihrer Größe - also -50% von sich selbst. Ordentlich.
Ich habe die maximale Breite für mein Video auf 100% festgelegt. Auf Telefonen passt das Video automatisch an die Breite des Bildschirms. Da das eingebettete Video nur 560 Pixel breit ist, fügte ich dem Iframe nur einen 10% igen linken Rand hinzu und setzte eine "0" für den Rand für das mobile CSS zurück (um die Vollseitenansicht zu ermöglichen). Ich wollte nicht die Mühe machen, jedes Video mit einem Div zu versehen ...
Desktop CSS:
Mobiles CSS:
Arbeitete perfekt für meinen Blog (Botanical Amy).
Mit Bootstrap's eingebauter .center-block Klasse, die den Rand links und rechts auf auto setzt:
Oder verwenden Sie die integrierte .text-center Klasse, die text-align: center :
Tags und Links css youtube twitter-bootstrap