WBCE CMS Forum

kleo

Member

[Erledigt] Video responsiv einbetten

Ich möchte auf einer Seite ein Youtube Video responsiv einbetten.
Es ist aber nicht responsiv. Wenn ich die Browserfenster verkleinere bleibt das Video in der Ursprungsgröße.

Ich habe probiert die Option "Eigene Größe" zu wählen und Breite und Höhe in % eingeben. Die Breite (z.B. 80%) wird übernommen, die Höhe aber nicht.

Wie kann ich das machen?

grindmobil

Member

Re: [Erledigt] Video responsiv einbetten

Welches template verwendest du denn?
Kennst du das hier?
https://wbce.at/tpls/topics/videos-einbinden.php

Last edited by grindmobil (11.06.2017 20:34:33)

kleo

Member

Re: [Erledigt] Video responsiv einbetten

Denn Artikel habe ich jetzt gelesen und einges schon probiert.

Beim CKEditor (Version4.6.2.2) gibt es bei mir keine Zeile die so was enthält:

/modules/ckeditor/plugins/youtube, ca Zeile 305:

content = '<div class="responsiveVideo">'+ content +'</div>'; //Das hier einfügen
instance.insertHtml( content ); //vor dem

Die andere Frage:

<div class="responsiveVideo">
[hier kommt der Code von YouTube rein.]
</div>

In welcher Form soll das Video hier eingefügt werden?
Als <iframe allowfullscreen="" src="https://www.youtube.com/embed/xxxxx"></iframe>, oder?

Und wenn ich das Video mit nur noch 80% der Breite ausgeben will, kann ich das mittig platzieren?

colinax

Developer

Re: [Erledigt] Video responsiv einbetten

Beim CKEditor (Version4.6.2.2) gibt es bei mir keine Zeile die so was enthält:

/modules/ckeditor/plugins/youtube, ca Zeile 305:

content = '<div class="responsiveVideo">'+ content +'</div>'; //Das hier einfügen
instance.insertHtml( content ); //vor dem

Hallo kleo,

so eine Zeile kann es auch nicht geben, wenn das Plugin nicht vorhanden ist.

Das Youtube Plugin wurde mit 4.6.x entfernt, da MediaEmbed dasselbe macht.

Das Icon für MediaEmbed befindet sich zwischen den Bild und Flash Icons.

LG Colinax

PS: in dem Pfad fehlt übrigens auch die zu bearbeitende Datei.

kleo

Member

Re: [Erledigt] Video responsiv einbetten

Meine Problematik habe ich gerade in der ersten Meldung mit dem MediaEmbed beschrieben:

"Es ist aber nicht responsiv. Wenn ich die Browserfenster verkleinere bleibt das Video in der Ursprungsgröße.

Ich habe probiert die Option "Eigene Größe" zu wählen und Breite und Höhe in % eingeben. Die Breite (z.B. 80%) wird übernommen, die Höhe aber nicht."

florian

Projektmanagement und Support WBCE CMS

Re: [Erledigt] Video responsiv einbetten

Der Trick scheint zu sein, einen Div um das Video herumzulegen, sagt das Internet. Je nach dem, ob Du dies nur einmal oder mehrmals brauchst, fügst Du entweder den Code direkt in der Quellcode-Ansicht im CKEditor ein, legst einen Code2-Abschnitt vom Typ HTML an, erstellst Dir ein Droplet dafür oder realisiert das mit Itemz.

goebelino

Member

Re: [Erledigt] Video responsiv einbetten

Mit einem DIV um das Video funktioniert es eigentlich ganz gut. Die Lösung findet man auf verschiedenen Seiten im Netz. Habe es hier damit realisiert: http://restons-ensemble.de/

Zunächst ein DIV um das Video mit entsprechender Klasse.

<div class="video"><iframe allowfullscreen="" frameborder="0" height="720" src="https://www.youtube.com/embed/52zSG6wMZ78?rel=0" width="1280"></iframe>
</div>

Dann werden iFrame und Div entsprechend definiert. In meinem Fall habe ich das im Template realisiert. Beim Beispiel unten wird das Video auf 49 Prozent der Seitenbreite dargestellt. "padding-bottom: 27.07%;" entspricht dem Seitenverhältnis. Je nach Größe einfach mit Dreisatz umrechnen...

.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;;
height: 100%;
}
.video {
position: relative;
padding-bottom: 27.07%; /* Muss je nach Breite angepasst werden*/
padding-top: 0px;
height: 0;
overflow: hidden;
	height: auto;
	width: 49%;
	margin-right: 1%;
	float: left;
	align-items: center;
	alignment-baseline: center;
	
}

grindbatzn

Member

Re: [Erledigt] Video responsiv einbetten

Im CSS von goebelino ist einiges drin, was Ärger machen kann. So viel braucht es gar nicht.

Hier: https://wbce.at/tpls/topics/videos-einbinden.php ist eben die Minimal-Variante.

Geh in die QuellCode-Ansicht, und dort wo das VIdeo erscheinen soll kopierst du rein:
<div class="responsiveVideo">
[hier kommt der Code von YouTube rein.]
</div>

Das [hier kommt der Code von YouTube rein.] ersetzt du durch den embed-Code von Google; beginnend mit <iframe....

Damit das ganze dann auch funktioniert, braucht man die CSS-Angaben:

[== CSS ==]
.responsiveVideo {
   position: relative;
   padding-bottom: 56.25%; padding-top: 30px;
   height: 0;
   overflow: hidden;
}

.responsiveVideo iframe,  .responsiveVideo object, .responsiveVideo embed {
   position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

In vielen neueren Templates sind die bereits drin - deswegen hab ich ja nach dem Template gefragt.

Die CSS Angaben kannst du in die editor.css deines Templates kopieren; dann siehst du das auch gleich im Editor. Das kann aber unhandlich breit sein.
Du kannst es auch in die template.css kopieren, dann ist das VIdeo im Editor so wie von Google ausgeliefert und schmäler. Nachteil: Du siehst im Editor nicht, ob es responsive ist, nur im Frontend siehst du es.

Last edited by grindbatzn (13.06.2017 09:32:11)

kleo

Member

Re: [Erledigt] Video responsiv einbetten

Ich werde es probieren.
Die Template bastele ich mir jetzt selbst aus einer HTML-Vorlage.

better-work

Member

Re: [Erledigt] Video responsiv einbetten

Responsive Youtube habe ich hier im Einsatz =
https://www.reinshagen.biz/optifog/

(Wenn für DE= unbedingt auch Datenschutzhinweise mit hinterlegen!!!)
Und am Besten über diese Domain einbetten= https://www.youtube-nocookie.com/embed/....

CSS=

[== CSS ==]
/* ---------------------------------
--- YouTube Responsive Container ---
--------------------------------- */

.iframe-youtube-container {
	position:relative;
	margin-bottom: 30px; 
	padding-bottom:56.25%; 
	padding-top:25px; 
	height:0; 
	max-width:100%; 
	} 

.iframe-youtube-container iframe { 
	position:absolute; 
	top:0; 
	left:0; 
	width:100%; 
	height:100%; 
	border:none;
	}

Die eigentliche Einbettung dann=

[== HTML ==]
<div class="iframe-youtube-container"><iframe allowfullscreen="" src="https://www.youtube-nocookie.com/embed/ICaKHSqh-GI?rel=0"></iframe>
</div>

---

Gruß Jörg

grindbatzn

Member

Re: [Erledigt] Video responsiv einbetten

Man kann die Klasse nach Laune benennen, in den neueren Templates heißt sie :
.responsiveVideo
Als Zugeständnis an Bootstrap gelegentlich zusätzlich: .flex-video

Die CSS Anweisungen sind eh immer gleich.
padding-bottom:56.25%; erzeugt den Platz für das Video, immer proportional
padding-top: 30px; oder 25px; macht den Platz für Header und Controller in fixer Höhe.
Der Rest ist 0%/100% und reseten.

kleo

Member

Re: [Erledigt] Video responsiv einbetten

Wäre es vielleicht sinnvoll diese Funktion gleich im Editor zu haben?

colinax

Developer

Re: [Erledigt] Video responsiv einbetten

Wäre es vielleicht sinnvoll diese Funktion gleich im Editor zu haben?

Hallo kleo, welche Funktion meinst Du damit?

kleo

Member

Re: [Erledigt] Video responsiv einbetten

Am Anfang an habe ich versucht das Video von Youtube gleich im Editor mit der Hilfe von Button "Medieninhalt von verschiedenen Seiten einbinden". Und habe dabei bei der Option "Größenveränderungsmodus (Nur Video's): Responsive" gewählt. Und wirklich responsiv war es leider nicht, deshalb habe ich hier gepostet.

colinax

Developer

Re: [Erledigt] Video responsiv einbetten

Ah okey, da liegt also das Problem.

Das Plugin "Medieninhalt von verschiedenen Seiten einbinden" hilft dir im Grunde nur bein syntax korrekten einbinden der Videos also das aus der URL bzw. den Link ein iframe wird damit man es auf der eigenen Seite abspielen kann.

Wenn im Größenveränderungsmodus auf Responsive gestellt wird das Video nicht Responsive, da ein iframe nicht responsive ist, sondern es werden nur Werte wie z. B. width auf max-width geändert, mehr nicht.

Damit ein Video bzw. iFrame im Template Responsive ist, muss der Template Ersteller dafür sorgen.

Die (Text-)Editoren können da generell nichts machen, da dieser nur eine Oberfläche darstellen um den Text in der Datenbank zu bearbeiten.

campus

Member

Re: [Erledigt] Video responsiv einbetten

Wir haben alle diese Sachen in ein Droplet gepackt, funktioniert gut.
Hier der Dropletcode zum anlegen:

## ==========start=========
## Droplet Name: 
## YoutubeHR
## Responsive Youtube iFrame 100% breit
## 11. Juli 2017 
## ========================
## 
if (!$height) $height=315;
if (!$width) $width=560;
$returnvalue = '<div class="embed-container" style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden; width:100%; height:auto;"><iframe style="position:absolute; top:0; left:0; width:100%; height:100%;" width="'.$width.'%" height="'.$height.'" src="http://www.youtube-nocookie.com/embed/'.$id.'?rel=0" frameborder="0" allowfullscreen></iframe></div>';
return $returnvalue;
## 
## 
## Use: [[YoutubeHR?id=XXXXXXXXX]]
## Responsive Youtube iFrame 100% breit
## ===============================end=====================================

hgs

Member

Re: [Erledigt] Video responsiv einbetten

  Funktioniert super, Danke.

---

LG Harald
"Fange nie an, aufzuhören - höre nie auf, anzufangen." Marcus Tullius Cicero (106-43 v.Chr.)

better-work

Member

Re: [Erledigt] Video responsiv einbetten

@campus

Vielen Dank für Deine Mühe.

Eine kleine Verbesserung, anstelle von=

...src="http://www.youtube-nocookie.com/embed/'.$id.'?rel=0...

besser=

...src="https://www.youtube-nocookie.com/embed/'.$id.'?rel=0...

GRUND= HTTP Seiten ist es Wurst, wie das Video geladen wird, bei HTTPS Seiten baut man sich so allerdings eine Fehlermeldung ein!

[EDIT]

@campus
Auch nach mehrmaligem lesen ist mir nicht aufgefallen das ich HTPS statt HTTPS geschrieben hatte... Korrigiert und Danke...

Last edited by better-work (12.07.2017 16:38:38)

---

Gruß Jörg

campus

Member

Re: [Erledigt] Video responsiv einbetten

bei HTPS bestimmt 

danke!

meetje

Member

Re: [Erledigt] Video responsiv einbetten

I'm not that https savy :-) but I think the following link could be of interest for this droplet too:
http://www.willmaster.com/videos/index.php
Cite:

For websites that serves pages with HTTP and HTTPS protocols, it can be a lot of work to code for conform links into http:// or https:// — depending on which protocol the browser is using on the page. Incorrectly coding an image or other file that's pulled into the page can cause the browse's "secure" lock icon to break.

There's a method where no extra coding is required.

For URLs leading to pages, images, or other files in href and src attributes, start the URL with // instead of http:// or https://.

When the browser sees href and src links that begin with // instead of http:// or https://, it automatically assumes the URL's protocol is the same as the URL in the browser's address bar. (Or the URL of the framed document if the page is within an iframe tag.)

Hope this is useful for this case or another.

hgs

Member

Re: [Erledigt] Video responsiv einbetten

Funktioniert mit dem Tipp von meetje

der Code sieht bei mir jetzt so aus:

$returnvalue = '<div class="embed-container" style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden; width:100%; height:auto;"><iframe style="position:absolute; top:0; left:0; width:100%; height:100%;" width="'.$width.'%" height="'.$height.'" src="//www.youtube-nocookie.com/embed/'.$id.'?rel=0" frameborder="0" allowfullscreen></iframe></div>';
return $returnvalue;

---

LG Harald
"Fange nie an, aufzuhören - höre nie auf, anzufangen." Marcus Tullius Cicero (106-43 v.Chr.)

campus

Member

Re: [Erledigt] Video responsiv einbetten

yes, good point, meetje ! works flawless. thanks a lot !
here the code with comments for better identification:

## ==========start=========
## Droplet Name: 
## YoutubeHR
## Responsive Youtube 16:9 @ 100% for http as well as for https
## 12. Juli 2017 
## ========================
## 
if (!$height) $height=315;
if (!$width) $width=560;
$returnvalue = '<div class="embed-container" style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden; width:100%; height:auto;"><iframe style="position:absolute; top:0; left:0; width:100%; height:100%;" width="'.$width.'%" height="'.$height.'" src="//www.youtube-nocookie.com/embed/'.$id.'?rel=0" frameborder="0" allowfullscreen></iframe></div>';
return $returnvalue;
## 
## 
## Use: [[YoutubeHR?id=XXXXXXXXX]]
## Responsive Youtube 16:9 @ 100% for http as well as for https
## ===============================end=====================================

florian

Projektmanagement und Support WBCE CMS

Re: [Erledigt] Video responsiv einbetten

Anmerkung zu Embed Media-Plugin, falls nicht das obige Droplet verwendet wird:
Die Adresse des Videos muss mit /embed/ angegeben werden, also
https://www.youtube.com/embed/aboZctrHfK8
und nicht
https://www.youtube.com/watch?v=aboZctrHfK8
oder
https://youtu.be/aboZctrHfK8

foxlake

Member

Re: [Erledigt] Video responsiv einbetten

Hello All, can it be that the droplet is not working anymore ?

WBCE Version: 1.3.2
Tag: 1.3.2
PHP Version: 7.1.22

I'm using the right link like this https://www.youtube.com/embed/aboZctrHfK8  but its not working ?   I get a black field with a play button but a error from youtube.

florian

Projektmanagement und Support WBCE CMS

Re: [Erledigt] Video responsiv einbetten

In the droplet you just have to enter the video ID, e.g. [[youtubehr?id=aboZctrHfK8]]
My post above with the full URLs is omly relevant when using the the CKEditor "Embed media" plugin.