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

Video-Ausgabe @media object-fit: cover (Safari)

Dieses Thema im Forum "Design" wurde erstellt von bastlkastl, 23. April 2021.

Schlagworte:
  1. bastlkastl

    bastlkastl Active Member

    Registriert seit:
    31. März 2017
    Beiträge:
    42
    Zustimmungen:
    0
    Hallo liebe Community!

    Ich habe ein CSS-Problem und ich hoffe, ihr könnt mir helfen.

    Ich habe ein Video im Querformat, das bildschirmfüllend dargestellt werden soll (Höhe und Breite). Es funktioniert auch überall so. Bis auf SAFARI...Dort wird das Video nicht "object-fit: cover" angezeigt.

    Meine Codes hierzu wären:

    HTML:

    <video id="video" controls poster="https://angebote.businessbasis.at/wp-content/uploads/2020/12/Points.jpg">
    <source src="https://angebote.businessbasis.at/wp-content/uploads/2021/04/Büro_Grundidee.mp4" type="video/mp4">
    </video>

    JS:

    <script type="text/javascript">
    document.getElementById('video').addEventListener('ended',function(){
    window.location ="https://businessbasis.at";
    }, false);
    </script></div>

    CSS:
    #video{display: block;
    width: 100vw;
    height: 100vh;
    object-fit: cover;}

    Dazu noch der Header-Tag:

    <meta name="viewport" content="width=device-width, initial-scale=1">

    Die Testseite hierzu wäre: https://angebote.businessbasis.at/testintro/

    Kann mir hierzu jemand helfen? bin mit meinem Latein am Ende. Wie gesagt: SAFARI mag mich nicht :(

    glg Ines
     
  2. Michi91

    Michi91 Well-Known Member

    Registriert seit:
    8. November 2008
    Beiträge:
    1.972
    Zustimmungen:
    42
    Hey,
    hab es gerade mal im Safari 12.1 getestet. Da sieht alles gut aus, ich denke neuere Versionen werden sicherlich auch funktionieren. Welchen Safari hast du? Kannst du ma einen Screenshot erstellen?
     
  3. bastlkastl

    bastlkastl Active Member

    Registriert seit:
    31. März 2017
    Beiträge:
    42
    Zustimmungen:
    0
    Hey!

    Danke für deine schnelle Antwort. Ich hab die neueste Version von Safari. ist es denn bei dir wirklich "Cover" (also Hochformat und zugeschitten...ich versuch grad einen Screenshot hochzuladen, aber irgendwie funzt das nicht....Datei zu groß...
     
  4. bastlkastl

    bastlkastl Active Member

    Registriert seit:
    31. März 2017
    Beiträge:
    42
    Zustimmungen:
    0
    Ich kann dir nur erklären was ich sehe:
    ich sehe das ganze Video in Querformat, oben und unten ein dicker schwarzer Balken...
     
  5. bastlkastl

    bastlkastl Active Member

    Registriert seit:
    31. März 2017
    Beiträge:
    42
    Zustimmungen:
    0
  6. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.317
    Zustimmungen:
    582
  7. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.317
    Zustimmungen:
    582
    404 Fehler - die Seite gibt es nicht (mehr).. Danke für die Zeitverschwendung
     
  8. bastlkastl

    bastlkastl Active Member

    Registriert seit:
    31. März 2017
    Beiträge:
    42
    Zustimmungen:
    0
  9. bastlkastl

    bastlkastl Active Member

    Registriert seit:
    31. März 2017
    Beiträge:
    42
    Zustimmungen:
    0
    Das „ü“ war leider auch nicht das Problem, aber danke für den Hinweis
     
  10. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
    Mojn,

    Ich bin auf diverse Anfragen in Foren gestoßen, welche das selbe Problem mit der css Anweisung object-fit beschrieben.
    Bei allen Antworten konnte man herauslesen das Safari wohl mal Probleme damit hatte wenn CSS Größen mit Prozentwerten (100%, oder 100vh) angegeben wurden.

    Hast du mal versucht ob sich was ändert, wenn du zum Test deine CSS Angaben auf fixe Größe setzt?
    Also zum Beispiel width: 300px; height: 400px;

    Ist jetzt nur eine Vermutung, aber eventuell ist das Problem beim Safari Browser ja heute noch vorhanden.
     
  11. meisterleise

    meisterleise Well-Known Member

    Registriert seit:
    18. Januar 2012
    Beiträge:
    1.351
    Zustimmungen:
    345
    Test: Safari 14.0.2 · MacBook 2880 x 1800 px (retina)
    Video wird korrekt in Vollbild angezeigt.
     
  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