YoubeTube Video responsive in 2.0 einbinden

[Viol]

Ich wollte heute ein Produktvideo in das responsive Template so einfügen, dass das Video selbst sich auch entsprechend verhält.
Ist relativ einfach zu lösen:
Im Editor Div auswählen, als Formatvorlagenklassen responsive-video eintragen.
Im Editor iframe eintragen entsprechende URL einfügen, Breite und Höhe einstellen.

In der stylesheet.css des Templates einfügen:

Code: CSS  [Auswählen]

*Video responsive */
.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
}
.responsive-video iframe
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*END Video responsive*/

Und schon wird das Video auf allen Bildschirmgrößen dargestellt.
Vielleicht kann es ja jemand brauchen, wenn es eine elegantere Lösung gibt,bitte gerne hier einbringen.

Linkback: https://www.modified-shop.org/forum/index.php?topic=36171.0

[astaller]

Hallo Viol,

ich habe es genauso wie du gemacht, funktioniert wunderbar.

MfG
Achim S.

[Onlineshopper]

Also wenn ich das so bei mir einbaue, dann ist das Video bei mir über die ganze Seite zu sehen.

LG
Nils

[hpzeller]

Hallo Nils,

also ohne es jetzt selbst getestet zu haben ob es funktioniert, hast du es so gemacht wie es in folgendem Link gezeigt wird?
https://www.ostraining.com/blog/coding/responsive-videos/

PS:
Wenn du das Problem nicht lösen kannst, ein Link zum Shop auf die Seite mit dem eingebundenen Video könnte einem Helfer helfen dir zu helfen.

Gruss
Hanspeter

[awids]

Hmmm....  Das Video, dass ich gefunden habe, passt sich zumindest responsive an, so wie es das soll. Das andere Elemente auf der Seite die Responsivität stören, hat mit dem Video ja nichts zu tun.

[Onlineshopper]

@HPzeller
ja das hab ich so eingebaut.

@awids
In der Tat. Bei dem Video funktioniert es. Allerdings ist das ja nicht der Code wie oben angegeben.

Mit dem Code funktioniert das merkwürdigerweise:

Code: PHP  [Auswählen]

<div style="position:relative;height:0;padding-bottom:56.25%">
<iframe allowfullscreen="" frameborder="0" height="416" src="https://www.youtube.com/embed/N_bggBvvI4k?rel=0?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="740">
</iframe>
</div>
 

LG
Nils

[Timm]

Hab zwei Probleme:

1)Youtube Video

Ich hab den Code von @Viol und auch aus dem Link von @hpzeller (wo aber .responsive-video verdreht ist-also drauf achten) eingefügt in die Stylesheet.css und dann im ckeditor folgendes eingefügt.

Code: XML  [Auswählen]

<div class="responsive-video" style="text-align: center;"><iframe allowfullscreen="" frameborder="0" height="360" scrolling="no" src="https://www.youtube-nocookie.com/embed/mMEhLQn89LA?rel=0" title="Perlenscheune der online Perlenshop für preiswerte Perlen, Schmuckzubehör und Kinderbastelperlen" width="640"></iframe></div>
 

Ist nun responsiv. Aber egal was ich für das iframe an Größen eingebe, das Video ist immer so breit wie die Seite. Man kann es auf großen Bildschirmen also nicht verkleinern, wofür die iframe Größenangabe doch sein sollte, oder? Außer man ändert in der Stylesheet.css  width: 100%; height: 100%; auf 75% zb. Dann wiederum ist das Video aber auf kleinen Bildschirmen zu klein. Da würde ich gerne die 100% Breite nutzen.

Kann mir da jemand bitte helfen?

Link: hier

2)Facebook Video

Gleiches iframe Problem, wie bei erstens. Zusätzlich aber noch das Problem, dass der untere Teil des Videos, sowie die Abspielbuttons und die Timeline fehlen. Die Einbettung funktioniert genauso, wie bei Youtube Videos laut der selben Seite, wie von @hpzeller gepostet, siehe hier.

So eingebaut:

Code: XML  [Auswählen]

<div class="responsive-video" style="text-align: center;"><iframe allowfullscreen="true" allowtransparency="true" frameborder="0" height="420" scrolling="no" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fperlenscheune.de%2Fvideos%2F1618375238219360%2F&amp;show_text=0&amp;width=560" style="border:none;overflow:hidden" width="560"></iframe></div>

Link: hier

Kann auch bei der Facebookvariante nicht weiter rumprobieren, weil mein Server denkt, dass ich ihn angreife, sobald der Cache gelöscht wird und ich wieder den ckeditor öffne und er das facebookvideo lädt. Danach bin ich mit meiner IP gesperrt. Shop ist aber weiter über jede andere IP erreichbar.

Code: XML  [Auswählen]

[client meineIP] ModSecurity: [file "/etc/httpd/conf/modsecurity.d/rules/tortix/modsec/50_plesk_basic_asl_rules.conf"] [line "250"] [id "340147"] [rev "134"] [msg "Protected by Atomicorp.com Basic Non-Realtime WAF Rules: Potential Cross Site Scripting Attack"] [data "<iframe"] [severity "CRITICAL"] Access denied with code 403 (phase 2). Pattern match "(?:< ?script|(?:<|< ?/)(?:(?:java|vb)script|about|applet|activex|chrome)|< ?/?i?frame|\\\\%env)" at REQUEST_URI. [hostname "www.perlenscheune.de"] [uri "/admin/<iframe src=\\"https://www.facebook.com/plugins/video.php"] [unique_id "WqgCXksgc0o1tSh@3cSLtwAAAAU"], referer: https://www.perlenscheune.de/admin/content_manager.php?action=edit&coID=21&coIndex=0

Gruß Timm

[christianwagner]

will nur sagen wie ich es schon von Anfang an mache:

stylesheet:

.bild-334 {
    max-width: 100%;
    height: auto;
}

fck-editor:

<iframe allowfullscreen="" class="bild-334" frameborder="0" height="150" src="//www.youtube-nocookie.com/...." width="300"></iframe>

das gleiche benutze ich auch für eine handvoll bilder die sich von selber nicht anpassen wollen.

[hpzeller]

Hallo Timm,

das width: 100%; und height: 100%; in diesem Regelsatz

Code: CSS  [Auswählen]

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 

hat höhere Priorität als das width="640" height="360" in folgendem Markup, deshalb sind sie ohne Wirkung.

Code: XML  [Auswählen]

<iframe allowfullscreen="" scrolling="no" src="https://www.youtube-nocookie.com/embed/mMEhLQn89LA?rel=0" title="Perlenscheune der online Perlenshop für preiswerte Perlen, Schmuckzubehör und Kinderbastelperlen" width="640" height="360" frameborder="0"></iframe>
 

Versuch es mal so.

Code: CSS  [Auswählen]

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 75%;
    height: auto;
}

@media screen and (max-width: 800px) {
  .responsive-video iframe {
      width: 100%;
      height: auto;
  }
}
 

Info hier -> https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Gruss
Hanspeter

[Timm]

Danke für eure Antworten. Hab mehrere Stunden dran gesessen, weil ich auch immer wieder rausgeschmissen wurde vom Shop.

Hab auf Grund des ersten Tipps mal

Code: XML  [Auswählen]

.responsive-video iframe
{
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;

das benutzt und es scheint mit youtube und facebook Videos zu funktionieren. Mit "height: 100%" wurde nur das halbe Video angezeigt. Aber keine Ahnung, ob das so nun korrekt ist.

@hpzeller
Was ist nun besser? Die gesamten Änderungen der Stylesheet.css wieder raus und dann nur den iframe code aus deiner Antwort einfügen? Weil im ersten Beitrag und deinem Link wurde das ja gefordert.

Gruß Timm

EDIT: Jetzt hast du deine Antwort noch erweitert. Das war beim schreiben meiner Antwort noch nicht sichtbar. Dann teste ich das auch mal. Obwohl es so jetzt scheinbar geht und ich eigentlich die Größe gerne selbst bestimmen würde über die Angabe im Iframe. Kann ja sein, dass man ein Video mal klein und mal groß einbinden möchte auf der Seite.

[Timm]

@hpzeller
Hab deine Variante grad getestet und dann sind die Videos auf desktop und mobil nur halb so hoch etwa. Ist auch noch so drin, falls du nochmal schaust.

Das liegt irgendwie an dem height:auto.

In allen Varianten ist auch immer sehr viel Platz unter dem Video leer. Kann man das noch verkleinern?

Gruß Timm

[hpzeller]

Teste mal dieses CSS.

Code: CSS  [Auswählen]

.responsive-video {
    position: relative;
    padding-bottom: 42.2%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 75%;
    height: 100%;
}

@media screen and (max-width: 800px) {

  .responsive-video iframe {
      width: 100%;
      height: 100%;
  }
 
  .responsive-video {
      padding-bottom: 56.25%;
  }

}
 

Gruss
Hanspeter

[Timm]

Vielen Dank Hanspeter

Klappt fast. Yeah!

Youtube läuft Mobil und Desktop.

Auf dem Desktop fehlt beim Facebookvideo noch der untere Teil und der Ton geht nicht. Mobil läuft es mit Ton, wahrscheinlich, weil da dann auch der Lautstärkeregler sichtbar ist. Das Vorschaubild hat zwar dort auch den Play Button nicht in der Mitte, aber da öffnet sich das Video ja dann größer mit schwarzem Hintergrund als Vollbild.

[hpzeller]

Hallo Timm,

dann nimm mal diesen CSS-Code

Code: CSS  [Auswählen]

.responsive-video {
    position: relative;
    padding-bottom: 42.2%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
}

.facebook-video {
    padding-bottom: 57% !important;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 75%;
    height: 100%;
}

@media screen and (max-width: 800px) {

  .responsive-video iframe {
      width: 100%;
      height: 100%;
  }
 
  .responsive-video {
      padding-bottom: 56.25%;
  }
 
  .facebook-video {
      padding-bottom: 75% !important;
  }  

}
 

und ersetze bei dem Facebook-Video diesen HTML-Code

Code: XML  [Auswählen]

<div class="responsive-video" style="text-align: center;">

mit diesem.

Code: XML  [Auswählen]

<div class="responsive-video facebook-video" style="text-align: center;">

Gruss
Hanspeter

[Timm]

Hab lieben Dank Hanspeter - es läuft nun mobil und desktop, ohne das irgendwas abgeschnitten ist.

Ich werde morgen mal mit den Werten für die desktopvariante ( .responsive-video iframe) rumspielen. Da sollte es noch etwas kleiner sein bzw am besten Einstellbar über die Werte, die unter Iframe-Eigenschaften eingegeben werden.

Die einzige Variante, wo sich eingegebene Iframe-Eigenschaften ausgewirkt haben, war mit dem

Code: CSS  [Auswählen]

.responsive-video iframe
{
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;

Ist der Ansatz mit dem max davor möglich, oder totaler Nonsens?

Gruß Timm