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:
    403
    Danke erhalten:
    205
    Danke vergeben:
    68
    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:
    9.088
    Danke erhalten:
    1.613
    Danke vergeben:
    1.212
    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:
    467
    Danke erhalten:
    164
    Danke vergeben:
    648
    <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:
    403
    Danke erhalten:
    205
    Danke vergeben:
    68
    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:
    403
    Danke erhalten:
    205
    Danke vergeben:
    68
    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:
    467
    Danke erhalten:
    164
    Danke vergeben:
    648
    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:
    9.088
    Danke erhalten:
    1.613
    Danke vergeben:
    1.212
    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:
    9.088
    Danke erhalten:
    1.613
    Danke vergeben:
    1.212
    hilft auch nicht
     
  10. Anonymous
    Anonymous G-WARD 2015/2016
    Registriert seit:
    20. Februar 2012
    Beiträge:
    9.088
    Danke erhalten:
    1.613
    Danke vergeben:
    1.212
    alles gut, funzt
     
  11. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    15. Januar 2020
    Beiträge:
    467
    Danke erhalten:
    164
    Danke vergeben:
    648
    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:
    9.088
    Danke erhalten:
    1.613
    Danke vergeben:
    1.212
    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:
    467
    Danke erhalten:
    164
    Danke vergeben:
    648
    :) 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:
    343
    Danke erhalten:
    36
    Danke vergeben:
    86
    <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:
    204
    Danke erhalten:
    89
    Danke vergeben:
    241
    <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:
    438
    Danke erhalten:
    27
    Danke vergeben:
    139
    #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>