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:
    123
    Danke erhalten:
    2
    Danke vergeben:
    29
    #1 Gianluca Lombardi, 19. Dezember 2016
    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
    #2 ReneT, 19. Dezember 2016
    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
    #3 bt012ss, 19. Dezember 2016
    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.768
    Danke erhalten:
    934
    Danke vergeben:
    302
    #4 Christian Mueller, 19. Dezember 2016

    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
    #5 bt012ss, 19. Dezember 2016
    Gut, hab mit Ebay nix am Hut :)