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

wordpress - responsive video (mobile)

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von wo_yuba, 1. September 2015.

  1. wo_yuba

    wo_yuba Active Member

    Registriert seit:
    27. März 2014
    Beiträge:
    27
    Zustimmungen:
    0
    Liebes Forum,

    leider wird meine Seite - es handelt sich um Text und ein Video (Vimeo) in der - mobile - Version des Themes nicht korrekt angezeigt. Es sind oben und unten schwarze Streifen zu sehen. Jetzt habe ich gelesen - es könne mit diesem Code gelöst werden. Aber wie steuere ich den DIV-Tag an und gibt es eine besser Alternative?

    Beste Grüße

    <div class="responsive-video">
    <iframe src="http://player.vimeo.com/video/47387431?title=0&amp
    ;byline=0&amp;portrait=0&amp;autoplay=0"
    width="1600" height="900" frameborder="0" webkitAllowFullScreen
    mozallowfullscreen allowFullScreen></iframe>
    </div>

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

    .responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    }
     
  2. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.445
    Zustimmungen:
    243
    Leider können wir nicht auf deine Seite gucken, da ein Link dorthin fehlt (s. Forenregeln). Von daher weiß ich auch nicht, welcher DIV in deinem Theme angesprochen werden muss.
    Wenn du den Link nicht posten willst, warte ob vielleicht Tubedesigner hier vorbei kommt und ohne Link weiterhelfen kann :D :oops:
     
  3. Frank9652

    Frank9652 Well-Known Member

    Registriert seit:
    10. Juni 2011
    Beiträge:
    697
    Zustimmungen:
    0
    Schwarze Streifen (entweder oben und unten oder rechts und links) kann zwei unterschiedliche Ursachen haben.

    1). Die schwarzen Streifen sind im Video integriert. Das kommt daher, dass das ursprüngliche Video in einem anderen Format zum Beispiel 4:3 vorlag, und es später auf 16:9 konvertiert wurde. Manche Video-Bearbeitungsprogramme füllen dann den fehlenden Bildteil mit diesem schwarzen Streifen auf.
    Diese schwarzen Streifen kann man zum Beispiel mit XMedia Recode wegschneiden, wodurch du dann aber wieder das urspüngliche Format hast.

    Ist dies bei dir nicht der Fall, dann kann es noch an folgendem liegen

    2). Das Videoformat liegt in einem anderen Seitenverhältnis vor, als das Format, das du auf deiner Homepage haben willst (nämlich 16:9).
    Du gibst ja auf deiner Seite das Seitenverhältnis 16:9 (1600 x 900) an. Damit sagst du Wordpress erstelle einen Rahmen mit diesen Maßen in dem das Video abgespielt werden soll. Wenn das Video selbst aber ein anderes Seitenverhältnis als 16:9 hat, dann passt Wordpress den Rahmen an zwei !!! gegenüberliegenden Seiten an. Das können entweder die Seiten oben und unten, oder die Seiten rechts und links sein. Bei den anderen beiden Seiten erscheint ein schwarzer Balken damit das Video nicht verzerrt wird (ist ja auch sinnvoll).
    Hier hilft es, entweder das Seitenverhältnis für den Rahmen dem wirklichen Seitenverhältnis des Videos anzupassen, oder das Video selbst so zu beschneiden, dass es dem Seitenverhältnis von 16:9 entspricht.

    Hier noch eine Anleitung wie du das Seitenverhältnis eines Videos berechnen kannst. Nehmen wir an, du hast ein Video mit den Abmessungen 640 x 360 und willst wissen, ob das dem Seitenverhältnis 16:9 entspricht.
    Dann teilst du 640 durch 16 (Ergebnis ist 40) und multiplizierst die 40 mit 9. Kommt dann als Ergebnis 360 heraus (wie in diesem Fall) dann entsprechen die Abmessungen dem Seitenverhältnis 16:9.
    Das Resultat wäre, dass man keine schwarzen Streifen an zwei Seiten hätte, weil das Seitenverhältnis des Videos mit dem angegebenen Seitenverhältnis auf der Homepageseite übereinstimmt.

    3). Einbindung von Youtube Videos.
    Bei Youtube Videos kann sowohl Fall 1 als auch Fall 2 vorliegen. Da Videos in in unterschiedlichen Seitenverhältnissen zu Youtube hochgeladen werden.
    Hier hat man nur die Wahl entweder mit den schwarzen Streifen zu leben, oder das Youtube Video runterzuladen, entsprechend zu bearbeiten und auf den eigenen Server hochzuladen, was aber dann wieder vorraussetzt den Urheber des Videos um Erlaubnis zu bitten dies auch tun zu dürfen um keine Abmahnung zu riskieren.

    Bei vimeo kenne ich mich nicht aus. Weiß nur, dass diese Videos in relativ hoher Qualität vorliegen. Ob hochgeladene Videos zu vimeo nur ein einzelnes Seitenverhältnis haben (dürfen) oder auch unterschiedliche Seitenverhältnisse haben, entzieht sich meiner Kenntnis.

    Hier noch ein Link zu Wikipedia mit dem Thema

    Gruß Frank
     
    #3 Frank9652, 3. September 2015
    Zuletzt bearbeitet: 3. September 2015
  4. Tubedesigner

    Tubedesigner Well-Known Member

    Registriert seit:
    24. April 2015
    Beiträge:
    2.048
    Zustimmungen:
    1
    Hier braucht es keinen Link zur HP, sondern allenfalls zum Video bzw. zu einem Video im exakt gleichen Format auf demselben Videotubeportal.
     
  5. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.445
    Zustimmungen:
    243
    mit dem Video kann ich helfen, steht ja oben in der Frage: http://player.vimeo.com/video/47387431
     
  6. Tubedesigner

    Tubedesigner Well-Known Member

    Registriert seit:
    24. April 2015
    Beiträge:
    2.048
    Zustimmungen:
    1
    Ja, ja, was so alles in solchen Fragen steht, da sind ja auch oft so Adressen wie meinehomepage.de, domain.com, testseite.de, 123irgendwas.tralala etc. zu finden, das Video aus dem Quellcode oben produziert schon mal keine schwarzen Streifen, wenn man es ganz simpel im optischen Standardeditor von WP einfügt und WP alles weitere machen lässt.

    Aber vieleicht geht es ja um eine anderes Video oder es liegt am Endgerät bzw. dessen Browser oder gar einer App die das Video darstellt.

    Aber vielleicht schreibt der OP ja noch was dazu…
     
  7. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.329
    Zustimmungen:
    412
    Es steht ja noch nicht mal welches Theme genutzt wird. Und auch ich finde hier ein Link angebracht. Sonst wird es zum Ratespiel bzw. bleibt es ein Ratespiel.
     
  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