it-swarm.com.de

Wie kann ich in YouTube eingebettetes Video in der Mitte in Bootstrap ausrichten?

Ich versuche, das eingebettete YouTube-Video in der Mitte der Seite meiner Bootstrap-Seite auszurichten. Die Größe des Videos ist immer gleich.

Meine HTML sieht sehr einfach aus:

<div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>

Ich habe verschiedene Lösungen von stackoverflow ausprobiert (die sich nur auf ein Div und nicht auf ein Video konzentrierten), und das Beste, was ich finden konnte, war diese Geige .

Ich habe bereits Lösung1 , Lösung2 , Lösung3 versucht, jedoch ohne Ergebnis. Eine andere teilweise erfolgreiche Lösung war zu verwenden:

width: 50%;
margin: 0 auto; 

Es funktionierte gut auf dem Desktop, schlug aber auf dem iPad oder einem Telefon fehl (das Video wurde teilweise außerhalb eines Bildschirms angezeigt). Wie ist es möglich, das Video in Desktop/Tablet/Telefon richtig zu zentrieren?

10
Salvador Dali

Ein wichtiger Hinweis/"Bootstrap" ist nur eine Reihe von CSS-Regeln

eine Geige

HTML

<div class="your-centered-div">
    <img src="http://placehold.it/1120x630&text=Pretend Video 560x315" alt="" />
</div>


CSS

/* key stuff */
.your-centered-div {
    width: 560px; /* you have to have a size or this method doesn't work */
    height: 315px; /* think about making these max-width instead - might give you some more responsiveness */

    position: absolute; /* positions out of the flow, but according to the nearest parent */
    top: 0; right: 0; /* confuse it i guess */
    bottom: 0; left: 0;
    margin: auto; /* make em equal */
}

Voll funktionsfähig jsFiddle ist hier .

BEARBEITEN

Ich verwende das meistens in diesen Tagen:

gerade CSS

.centered-thing {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

wenn Sie Stylus/Mixins verwenden (sollten Sie ... es ist das Beste)

center-center()
    absolute()
    margin auto
    top 50%
    left 50%
    transform translate(-50%,-50%)

Auf diese Weise ... müssen Sie nicht die Größe des Elements kennen - und das Übersetzen basiert auf seiner Größe - also -50% von sich selbst. Ordentlich.

10
sheriffderek

Youtube verwendet iframe . Sie können es einfach einstellen auf:

iframe {
   display: block;
   margin: 0 auto;
}
6
ToTech
<iframe style="display: block; margin: auto;" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen></iframe>
3
Miloud Eloumri

Sie müssen <iframe> nicht in ein übergeordnetes div eingeben. Sie können mit CSS/3 genau youtube iframe als Ziel auswählen:

iframe[src*="//youtube.com/"], iframe[src*="//www.youtube.com/"] {
   display: block;
   margin: 0 auto;
}
2
T.Todua

Bootstraps eingebaute .center-block -Klasse verwenden, die den Rand links und rechts auf auto setzt

<iframe class="center-block" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>

Oder mit der eingebauten .text-center Klasse, die text-align: center setzt:

<div class="text-center">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>
0
Bruno Peres

Ich habe die maximale Breite für mein Video auf 100% festgelegt. Bei Telefonen passt sich das Video automatisch der Bildschirmbreite an. Da das eingebettete Video nur 560px breit ist, habe ich nur einen linken Rand von 10% zum iframe hinzugefügt und eine "0" für den Rand für das mobile CSS eingefügt (um die Ansicht in voller Breite zu ermöglichen). Ich wollte mir nicht die Mühe machen, jedes Video mit einem Div zu versehen ...

Desktop-CSS:

iframe {
		margin-left: 10%;
	}

Mobile CSS:

iframe {
		margin-left: 0;
	}

Arbeitete perfekt für meinen Blog (Botanical Amy).

0
BotanicalAmy

Versuchen Sie Folgendes, um ein vollständig ansprechendes IFramed-YouTube-Video zu erhalten:

<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;
}
0
Stephen Kaufman

mache iframe mit align = "middle" und setze es in den Absatz mit style = "text-align: center":

<p style="text-align:center;">
<iframe width="420" height="315" align="middle" src="https://www.youtube.com/embed/YOURVIDEO">
</iframe>
</p>
0
Boris Gafurov
<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>

dies funktioniert bei Vimeo, indem eine ID myFrame zur iframe hinzugefügt wird.

0
user9734177