WBCE CMS – Way Better Content Editing.
You are not logged in.
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
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)
Offline
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
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.
Offline
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
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
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
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)
Offline
colinax, goebelino
Ich werde es probieren.
Die Template bastele ich mir jetzt selbst aus einer HTML-Vorlage.
Offline
colinax
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
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
Wäre es vielleicht sinnvoll diese Funktion gleich im Editor zu haben?
Offline
Wäre es vielleicht sinnvoll diese Funktion gleich im Editor zu haben?
Hallo kleo, welche Funktion meinst Du damit?
Offline
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
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.
Offline
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
meetje, better-work, florian
Funktioniert super, Danke.
LG Harald
"Fange nie an, aufzuhören - höre nie auf, anzufangen." Marcus Tullius Cicero (106-43 v.Chr.)
Offline
@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
Offline
campus, florian
bei HTPS bestimmt
danke!
Offline
better-work, florian
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
better-work
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
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=====================================
Offline
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
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.
Offline
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.
Offline