Facebook Video - IFRAME responsiv als Modul einbinden

    Leider gelingt es mir trotz viel zeitaufwand einfach nicht, Facebook-Videos responsiv einzubinden.

    Aktuell versuche ich es mit diesem Code und das Ergebnis ist ernüchternd. In der Breite klappt das ja alles noch mit 100% aber die Höhe mit "auto" wird ignoriert. Wenn ich dann eine für den Desktop passende Höhe wie z.B. 560 verwende, wird das Video in der Höhe nicht vollständig angezeigt.

    Code
    <div class="video-responsive" style="text-align: center;"><iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffranciscolufinha%2Fvideos%2F1560088460994027%2F&amp;show_text=0&amp;width=" width="100%" height="auto" style="border: none; overflow: hidden;" allowfullscreen="allowfullscreen" scrolling="no" frameborder="0"></iframe></div>

    Ich habe irgendwo auch was aufgeschnappt, dass man dies mit einem umlagernden Container sauber hinbekommt aber dazu reichen meine css-Kenntnisse (noch) nicht aus.

    Ich habe natürlich Plugins für Youtube-Videos aber die funktionieren nicht bei Facebook.


    Könnt Ihr mir helfen?

    Stecke im Projekt echt fest und das alles wegen diesem Video IFRAME Gedöhns was sowie nicht DSGVO-konform ist aber da es sich um eine Migration auf J4 handelt, hat mich das laut Kundenaussage auch nicht zu interessieren, naja :rolleyes:.


    Screenshot Smartphone:



    Screenshot Webseite:


    So wird es bei mir responsive, gestestet mit Cassiopeia und TinyMCE


    Code
    <div><iframe style="border: none; overflow: hidden;" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffranciscolufinha%2Fvideos%2F1560088460994027%2F&amp;show_text=0&amp;" width="100%" height="560px" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>

    Oder diesen Code:


    Code
    <div class="fb"><iframe style="border: none; overflow: hidden;" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffranciscolufinha%2Fvideos%2F1560088460994027%2F&amp;show_text=0&amp;" width="100%" height="560px" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>


    und in deiner user/custom css


    Code
    @media only screen and (max-width: 600px) {
.fb {
width: 100%;
height: auto;
}
}


    Browsercache gut löschen.


    .

    drmenzelit: Stimmt Viviana, denn hinterher gehen die Diskussionen los, dass man nicht gewarnt oder beraten hätte.

    Er meint, dass er redaktionell verantwortlich wäre und ich dafür sorgen soll, dass technisch alles klappt.


    christine2: Es funktioniert nicht, denn wenn ich die Angaben nicht verwende, wird es einfach zu klein.

    Hätte nicht gedacht, dass dies heute noch so Probleme bereitet.

    Hab das hier gefunden: http://maddesigns.de/responsive-iframes-2417.html. Da steht zwar auch wegen YT, aber den Code dort siehe bei "Beispiel" 1:1 temporär übernommen. Vorher natürlich:

    Code
    <div class="embed-container">etc.

    und den CSS Code nachher reingetan. Ohne natürlich dieses ratio zu überprüfen :)

    Der große Fleck unterhalb war damit weg.


    Und Ja, beachte das von Viviana.


    Liebe Grüße

    Christine


    Edith sagt: Stef die Breite/Höhe hab ich dann nachher wieder gelassen.

    WM-Loose,


    Hier ist die Lösung:


    Code
    <div class="video-stef"><iframe style="border: none; overflow: hidden;" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffranciscolufinha%2Fvideos%2F1560088460994027%2F&amp;show_text=0&amp;" width="100%" height="560px" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>


    Und in deiner user/custom.css