WBCE Home | WBCE Hilfe | WBCE Addon Repository | Impressum | Datenschutz

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 11.06.2017 21:12:52

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?

Offline

#2 11.06.2017 21:32:29

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 21:34:33)

Offline

#3 12.06.2017 13:21:51

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?

Offline

#4 12.06.2017 15:38:32

colinax
Developer

Re: [Erledigt] Video responsiv einbetten

kleo wrote:

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.


Die aktuellste Versionen von CKEditor gibt’s im AOR und auf meiner GitHub Seite.

Offline

#5 12.06.2017 19:58:21

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."

Offline

#6 13.06.2017 06:52:20

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.

Offline

#7 13.06.2017 08:34:05

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;
	
}

Offline

#8 13.06.2017 10:26:08

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 10:32:11)

Offline

Liked by:

colinax, goebelino

#9 13.06.2017 23:57:32

kleo
Member

Re: [Erledigt] Video responsiv einbetten

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

Offline

Liked by:

colinax

#10 16.06.2017 10:25:16

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

Offline

#11 16.06.2017 10:53:59

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.

Offline

#12 17.06.2017 21:21:30

kleo
Member

Re: [Erledigt] Video responsiv einbetten

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

Offline

#13 17.06.2017 22:02:11

colinax
Developer

Re: [Erledigt] Video responsiv einbetten

kleo wrote:

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

Hallo kleo, welche Funktion meinst Du damit?


Die aktuellste Versionen von CKEditor gibt’s im AOR und auf meiner GitHub Seite.

Offline

#14 18.06.2017 12:29:02

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.

Offline

#15 18.06.2017 13:12:38

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.


Die aktuellste Versionen von CKEditor gibt’s im AOR und auf meiner GitHub Seite.

Offline

#16 11.07.2017 13:05:10

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=====================================

Offline

Liked by:

meetje, better-work, florian

#17 11.07.2017 14:17:57

hgs
Member

Re: [Erledigt] Video responsiv einbetten

thumb_up  Funktioniert super, Danke.


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

Offline

#18 11.07.2017 16:38:44

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...

glasses big_smile

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


Gruß Jörg

Offline

Liked by:

campus, florian

#19 11.07.2017 17:45:11

campus
Member

Re: [Erledigt] Video responsiv einbetten

bei HTPS bestimmt  wink

danke!

Offline

Liked by:

better-work, florian

#20 11.07.2017 22:06:44

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.

Offline

Liked by:

better-work

#21 12.07.2017 08:11:18

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.)

Offline

#22 12.07.2017 14:45:48

campus
Member

Re: [Erledigt] Video responsiv einbetten

yes, good point, meetje ! works flawless. thanks a lot ! smile
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=====================================

Offline

#23 25.02.2018 13:21:59

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

Offline

Board footer

Powered by FluxBB

up