1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Videos responsiv einfügen

Dieses Thema im Forum "Design" wurde erstellt von NeroPalme, 7. Dezember 2018 um 16:44 Uhr.

Schlagworte:
  1. NeroPalme

    NeroPalme Active Member

    Registriert seit:
    15. Juli 2013
    Beiträge:
    37
    Zustimmungen:
    0
    Hallo Leute,
    ich möchte Videos responsiv in einem iframe einfügen, habe dafür auch einen guten Ansatz gefunden... Das Video wird immer an die Bildschirmgröße des jeweiliges Gerätes angepasst, allerdings erschlägt es einen am PC.

    Das Video habe ich wie folgt eingebunden:

    CSS

    .responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }



    .responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    }


    und im Beitrag

    <div class="responsive-video">
    <iframe src="video" frameborder="0" webkitAllowFullScreen
    mozallowfullscreen allowFullScreen frameborder="0" ></iframe>
    </div>


    Jetzt bräuchte ich irgendwas, was die Formatierung am PC verhindert... Hat da einer 'ne Idee für mich?

    Danke!
     
  2. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    4.146
    Zustimmungen:
    274
    Du könntest einen weiteren Container um .responsive-video herum einfügen (bzw. den ggf. schon bestehenden Container nutzen) und dem eine max-width geben, Beispiel hier.
     
  3. NeroPalme

    NeroPalme Active Member

    Registriert seit:
    15. Juli 2013
    Beiträge:
    37
    Zustimmungen:
    0
    Schonmal vielen Dank, aber bei dieser Lösung ist die Anzeigenbreite auf dem Smartphone auch 50%...

    ich suche eher eine Lösung wie z.B.
    *Großer Monitor* 50%
    *Kleiner Monitor* 100%
     
  4. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    4.146
    Zustimmungen:
    274
  5. NeroPalme

    NeroPalme Active Member

    Registriert seit:
    15. Juli 2013
    Beiträge:
    37
    Zustimmungen:
    0
    Super, habe das Ganze um die paar Zeilen ergänzt..

    @Media only screen and (min-width: 900px) {
    .responsive-video-container {
    width: 50%;
    }
    }


    genau, was ich suchte.... Vielen Dank!
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden