Einbetten eines responsive youtube-iframe zu zentrieren einer Seite

Unten ist mein code, den ich versuche zu Mitte ein iframe , aber seine immer Links !Hier ist fiddle http://jsfiddle.net/4yL4od8j/

.videowrapper { 
text-align : center;
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
max-width: 700px;
max-height: 400px;
}

meine html -

     <center> <div class="videowrapper "><iframe src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></a></div></center>
InformationsquelleAutor Vishnu | 2014-11-25
  1. 1

    Machen Sie frame center müssen Sie Ihrem videowrapper eine bestimmte width und machen die margin left und right als auto.

    .videowrapper { 
        float: none;
        clear: both;
        width: 700px;<-- Added-->
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 25px;
        height: 0;
        margin: 0 auto;<-- Added-->
        max-width: 100%;<-- Added-->
    }

    Arbeiten Geige

    Trotz Sie wollen, stellen Sie Ihre frame-responsive verwenden Sie immer max-width: 100% zu Ihrem videowrapper.

    • dies macht es nicht reaktionsschnell Weg..bitte überprüfen Sie den Titel
    • Sie können überprüfen, meine aktualisierte Antwort.
    • es versaut ganze Seite..check totallyrockingz.com/temp/yt
    • und auch ich will, die Höhe zu reagieren...
    • machen Sie Ihren iframe positioniert absolute und positioniert es nach oben und von Links 0 also diesen stick, um seine relativ-Elemente stellen Sie sicher, dass Ihre center tag ist relativ positioniert und Stil entsprechend.
    • kann sein, dass das trick wird Ihnen helfen. 🙂
    • Entfernt habe ich Links und oben..es bewegt nach rechts jsfiddle.net/4yL4od8j/2
    • ich kopierte den code von dort nur :p aber wenn ich die max Breite und Höhe Durcheinander..

    InformationsquelleAutor Benjamin
  2. 0

    Versuchen Sie dies:

    <div align="center">
<div class="videowrapper "><iframe width="560" height="315"         src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0"   allowfullscreen></iframe></a></div>
</div>
    • funktioniert nicht ! bitte testen Sie vor der Buchung
    • Sicher mit inline-styles wie width="560" height="315" auf das iframe-element überschreiben von css-Deklarationen.
    • Ich habe getestet, scheint zu funktionieren gut für mich.
    • getestet haben Sie es mit der Benutzer-css überschreiben oder nur der html-code?
    InformationsquelleAutor Phasmatis
  3. 0

    ohne css-Lösung. iframe ausrichten, sich in den text des Absatzes, so legen es in einem leeren Absatz mit text-align:center

    <p style="text-align:center;">
<iframe width="420" height="315" align="middle"
src="https://www.youtube.com/embed/YOURVIDEO?controls=0"  allowFullScreen>
</iframe>
</p>
    InformationsquelleAutor Boris Gafurov
Schreibe einen Kommentar