Video responsive einbinden

Thema wurde von francis_john, 6. Februar 2021 erstellt.

  1. francis_john

    francis_john Mitglied

    Registriert seit:
    25. Januar 2021
    Beiträge:
    24
    Danke erhalten:
    0
    Danke vergeben:
    2
    Guten Abend,

    Leider haben die Codes hier im forum nicht zum Erfolg geführt. Ich würde gerne produktvideos responsive einfügen, auch auf dem PC. Es handelt sich um lokal gespeicherte Videos.

    Bitte um tatkräftige Unterstützung.
     
  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Dezember 2020
    Beiträge:
    339
    Danke erhalten:
    175
    Danke vergeben:
    52
    Also der Code funktioniert bei mir:
    HTML:
    <div class="embed-responsive embed-responsive-16by9">
                <video title="Titel" alt="Titel" autoplay="" loop="" poster="images/video/no-video-index.jpg"><source src="images/video/MyVideo.mp4" type="video/mp4"></video>
            </div>
    poster: ist ein gleich großes Bild, sollte ein Browser das Video nicht anzeigen (dürfen)
     
  3. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.910
    Danke erhalten:
    1.559
    Danke vergeben:
    1.133
    also bei mir funktioniert das leider nicht. Nicht mal das Bild wird angezeigt........
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    444
    Danke erhalten:
    159
    Danke vergeben:
    581
    <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="--->video in ausrufezeichen<---"></iframe>
    </div>

    Meinst du Lokal gespeichert bei dir aufm Computer? oder hast es schon irgendwo auf nem "Server" liegen?
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Dezember 2020
    Beiträge:
    339
    Danke erhalten:
    175
    Danke vergeben:
    52
    auf dem Server, so wie im Pfad angegeben ist:
    images/video/MyVideo.mp4
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Dezember 2020
    Beiträge:
    339
    Danke erhalten:
    175
    Danke vergeben:
    52
    Kann sein das bei dir etwas fehlt:
    im StyleEdit in deinem Style im eigenen CSS Code folgendes hinzufügen:
    @import "../bootstrap/bootstrap/responsive-embed"
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    444
    Danke erhalten:
    159
    Danke vergeben:
    581
    Ja dann so:

    <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="images/video/MyVideo.mp4"></iframe>
    </div>

    Funktioniert bei mir ohne Probleme
     
  8. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.910
    Danke erhalten:
    1.559
    Danke vergeben:
    1.133
    was hast denn für eine Shopversion? Habe Malibu und da wird bei mir nix angezeigt:

    upload_2021-2-26_17-57-35.png
     
  9. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.910
    Danke erhalten:
    1.559
    Danke vergeben:
    1.133
    hilft auch nicht
     
  10. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.910
    Danke erhalten:
    1.559
    Danke vergeben:
    1.133
    alles gut, funzt
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    444
    Danke erhalten:
    159
    Danke vergeben:
    581
    Was hast du nun gemacht das es geht?
    Ich habe Honeygrid, evtl. lag es ja daran, was ich aber nicht glaub.

    Klär uns auf :)
     
  12. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.910
    Danke erhalten:
    1.559
    Danke vergeben:
    1.133
    habe nur den Code von Gerd genommen:


    <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="images/videos/video.mp4"></iframe>
    </div>

    Beispiel: (Link nur für registrierte Nutzer sichtbar.)
     
  13. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    444
    Danke erhalten:
    159
    Danke vergeben:
    581
    :) komisch oder? ist ja der selbe, nun ja das Ergebnis zählt.
     
  14. mario_hintze

    mario_hintze Erfahrener Benutzer

    Registriert seit:
    22. Juni 2018
    Beiträge:
    101
    Danke erhalten:
    3
    Danke vergeben:
    10
    Hallo Zusammen,

    haben auch den Quellcode eingesetzt.
    Im Firefox und Chrome funktioniert es problemlos.

    Leider funktioniert es nicht auf mobilen Endgeräten.
    Getestet mit Iphone und Android.

    Würde mich über eine Rückmeldung freuen.
     
  15. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    31. Mai 2011
    Beiträge:
    339
    Danke erhalten:
    36
    Danke vergeben:
    84
    <div class="embed-responsive embed-responsive-16by9 ">
    <iframe allowfullscreen="embed-responsive-item" src="(Link nur für registrierte Nutzer sichtbar.) Pfad"></iframe>
    </div>
    funktioniert bei mir überall,
    ist aber ohne ohne cookie consens tool
     
  16. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    31. März 2020
    Beiträge:
    169
    Danke erhalten:
    59
    Danke vergeben:
    216
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
    .container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    }

    .responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
    } </style>
    </p>

    <div class="container">
    <iframe class="responsive-iframe" src="......"></iframe>
    </div>

    funktioniert bei mir immer. egal ob desktop oder mobil.
     
  17. PHI

    PHI Erfahrener Benutzer

    Registriert seit:
    23. März 2012
    Beiträge:
    427
    Danke erhalten:
    26
    Danke vergeben:
    137
    #17 PHI, 2. Dezember 2021
    Zuletzt bearbeitet: 2. Dezember 2021
    Das hier haben wir bei uns laufen, das läuft. Das Poster ist das start-Foto, und bei source src muss das Video angegeben werden, in dem Fall ist es im mp4-Format.

    <video class="img-responsive" controls="" height="505" poster="images/Foto.jpg" width="760"><source src="video1" type="video/mp4" /> Your browser does not support the video tag.</video>


    Code:
    <video class="img-responsive" controls="" height="505" poster="images/Poster.jpg" width="760"><source src="images/mein_video" type="video/mp4" /> Your browser does not support the video tag.</video>
     
  18. Anonymous

    Anonymous Mitglied
    Mitarbeiter

    Registriert seit:
    3. Dezember 2012
    Beiträge:
    19
    Danke erhalten:
    8
    Danke vergeben:
    6
    dem div um den Videocode die Klasse "video-container" geben.

    Beispiel für ein YT Video:
    <div class="video-container">
    <iframe width="100%" height="100%" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>