v3.10.x DIV Container in Tabs - Inhalt fehlerhaft

Thema wurde von Anonymous, 16. September 2018 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Juni 2018
    Beiträge:
    1.353
    Danke erhalten:
    163
    Danke vergeben:
    832
    Hallo,
    Ich habe Artikel zu denen ich auch Videos einfügen möchte.
    Habe also min. 2 Tabs:
    Beschreibung und Videos

    Im Video Tab habe ich folgenden Code um das Youtube Video Responsive einzubauen:

    Beispiel:

    Code:
    <div class="video-container"><iframe src="https://www.youtube.com/VIDEOURL"  frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    Copy
    Dies sorgt dann leider dafür das die Tabs nicht mehr richtig funktionieren. Der Inhalt wird fehlerhaft dargestellt.

    Gibt es da eine Lösung?


    CSS dazu:

    Code:
    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }
    
    .video-container iframe,
    .video-container object,
    .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
     
  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    33.744
    Danke erhalten:
    10.499
    Danke vergeben:
    1.500
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Juni 2018
    Beiträge:
    1.353
    Danke erhalten:
    163
    Danke vergeben:
    832
    Klappt leider nicht bzw. hat keinen Effekt auf das Video.
    Die Anleitung ist auch irgendwie nicht vollständig...
    Wo wird den das "embed-responsive embed-responsive-16by9" definiert? Die Class hab ich ja so gar nicht...?
    Das Video wird angezeigt aber halt in einem ganz komischen Format.

    EDIT: Kommando zurück! Es geht nun nach einer kleinen Änderung:

    Code:
    <div class="embed-responsive embed-responsive-16by9" style="max-width:300px">
        <iframe allowfullscreen="" class="embed-responsive-item" src="//www.youtube.com/embed/DEINE ID"></iframe>
    </div>
    Das "style="max-width:300px" habe ich mal rausgenommen, nun geht es tatsächlich!

    :)