YouTube Videos einbinden

Thema wurde von Gianluca Lombardi, 19. Dezember 2016 erstellt.

  1. Gianluca Lombardi
    Gianluca Lombardi Erfahrener Benutzer
    Registriert seit:
    23. September 2012
    Beiträge:
    124
    Danke erhalten:
    2
    Danke vergeben:
    29
    Hallo zusammen

    Ich möchte bei einigen Produkten gerne YouTube Videos einbauen. Wenn ich aber den normalen "Einbetten-Link" von Youtube nutze, wird das Video im mobilen Template in der Artikelbeschreibung nicht verkleinert sondern behält seine vorgegeben Grösse.

    Gibt es eine Möglichkeit, dass ich die Videos so einbinden kann, dass diese sich jeweils dem Template anpassen?

    Liebe Grüsse
    Gianluca
     
  2. ReneT
    ReneT Erfahrener Benutzer
    Registriert seit:
    1. Dezember 2016
    Beiträge:
    708
    Danke erhalten:
    232
    Danke vergeben:
    67
    Hallo Gianluca,

    das funktioniert nur wenn du das Video in einen Container packst...

    z.B. so
    Code:
    <div id="youtube_container"> <iframe class="youtube_video" width="640" height="360" src="https://www.youtube.com/embed/LaEEoOcIKPw?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div>
    dann musst du deine css Datei etwas erweitern
    Code:
    #youtube_container {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    }
    
    .youtube_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    nicht getestet, aber sollte so funktionieren...
     
  3. bt012ss
    bt012ss Erfahrener Benutzer
    Registriert seit:
    18. März 2012
    Beiträge:
    984
    Danke erhalten:
    281
    Danke vergeben:
    156
    Es geht noch einfacher ->
    Code:
    <div class="embed-responsive embed-responsive-16by9">
       <iframe allowfullscreen="" class="embed-responsive-item" src="https://www.youtube.com/embed/xxxxxxxxxxxxxx?rel=0&amp;showinfo=0"></iframe>
    </div>
    
    <div class="messageTextEndMarker">
       &nbsp;
    </div>
    
    Dies als Quellcode in die Artikelbeschreibung einfügen, fertig. Ist immer und überall bei mir responsive.
    xxxxxxxxxxxxeeeee natürlich gegen deinen YT Code tauschen.
     
  4. Christian Mueller
    Christian Mueller Beta-Held
    Registriert seit:
    4. Juli 2011
    Beiträge:
    3.825
    Danke erhalten:
    982
    Danke vergeben:
    312

    Funktioniert allerdings nicht wenn man das mit Magnalister zu eBay exportieren möchte. eBay verbietet iFrames.
     
  5. bt012ss
    bt012ss Erfahrener Benutzer
    Registriert seit:
    18. März 2012
    Beiträge:
    984
    Danke erhalten:
    281
    Danke vergeben:
    156
    Gut, hab mit Ebay nix am Hut :)