YouTube-Videos in Lightbox

Peter B.

Hallo zusammen,

ich habe jetzt ausgiebig Google und dieses Forum bemüht, aber keine Lösung gefunden.

Gibt es eine Möglichkeit YouTube-Videos in einer Lightbox einzubinden?

Ich habe etwa 15 Videos die ich jeweils mit einer kleinen Beschreibung auf einer Seite auflisten will. Ich habe diese jetzt alle inklusive Text untereinander aufgelistet und per YouTube-Widget eingebunden. Das geht auch soweit, das Widget ist allerdings recht groß, sehe ich aber eher als optisches Problem.

Problem ist eher, dass durch das laden der Vorschaubilder von YouTube die Seite auch entsprechend langsam lädt. Eigentlich bräuchte ich die Vorschau auch gar nicht. Ein Videosymbol auf das ich klicke und dann das Video in der Lightbox aufgeht, wäre völlig ok.

Vielleicht hat ja jemand einen Tipp für mich.

Viele Grüße

Peter

Mario

Hallo Peter,

ja das geht, schau mal HIER.

Das lässt sich aber noch etwas verfeinern.

Schreib mal welches Layout du verwendest und in welcher Größe (Breite x Höhe in Pixeln) du die Videos in der Lightbox öffnen möchtest.

Peter B.

Hallo Mario,

danke für die schnelle Antwort.

Ich benutze das Layout "Simple Responsive"

Größe??? Keine Ahnung. Am besten so, dass es immer an die Fenstergröße angepasst ist.

Nur das ich das richtig verstehe, Zeta Producer selbst kann das nicht und man muss dafür selbst "rumbasteln"?

Wenn wir gerade dabei sind. Ich habe auf der Seite die Videos jetzt einfach per Widget eingebunden. Dabei fällt auf, dass Vimeo-Videos in der mobilen Ansicht viel schöner verkleinert werden als YouTube-Videos, siehe Screenshot unten.

Woran kann das liegen?

Viele Grüße

Peter

Mario

Zitat von Peter B.

Nur das ich das richtig verstehe, Zeta Producer selbst kann das nicht und man muss dafür selbst "rumbasteln"?

Ja in Zeta Producer gibt es bisher dazu kein Widget.

Hier ein Beispiel wie du das umsetzen kannst. Die Videos werden in einer Größe von 820x461 Pixel dargestellt. Auf mobilen Geräten wird das Video in einem neuen Fenster geladen weil es sonst zu klein werden würde. Sofern eine Youtube-App installiert ist wird es in dieser geöffnet.

Link zur Beispielseite.

Einstellungen > CSS

Code

<style>
@media (max-width: 964px) {
 .youtube {
display:none;
}}
@media (min-width: 965px) {
 .blank {
display:none;
}}
</style>

Widget > Quelltext

Code

<a href="https://youtu.be/RMELJ0d0wCQ" class="youtube" title="Mario Götze vs. Marco Reus">
<p><span style="font-size: x-large">Mario Götze vs. Marco Reus  <img src="oid://image/play2" title="" alt=""></span></p>
</a>
<a class="blank" href="https://youtu.be/RMELJ0d0wCQ" title="Mario Götze vs. Marco Reus" target="_blank">
<p><span style="font-size: x-large">Mario Götze vs. Marco Reus  <img src="oid://image/play2" title="" alt=""></span></p>
</a>

<br>

<a href="https://youtu.be/qYwZquz-w1s" class="youtube" title="ThoMats #1 | Distanzschuss-Challenge">
<p><span style="font-size: x-large">ThoMats #1 | Distanzschuss-Challenge  <img src="oid://image/play2" title="" alt=""></span></p>
</a>
<a class="blank" href="https://youtu.be/qYwZquz-w1s" title="ThoMats #1 | Distanzschuss-Challenge" target="_blank">
<p><span style="font-size: x-large">ThoMats #1 | Distanzschuss-Challenge  <img src="oid://image/play2" title="" alt=""></span></p>
</a>

<br>

<a class="youtube" href="https://youtu.be/KQNiolj7QUQ" title="10 Unforgettable Red Cards In Football">
<p><span style="font-size: x-large">10 Unforgettable Red Cards In Football  <img src="oid://image/play2" title="" alt=""></span></p>
</a>
<a class="blank" href="https://youtu.be/KQNiolj7QUQ" title="10 Unforgettable Red Cards In Football" target="_blank">
<p><span style="font-size: x-large">10 Unforgettable Red Cards In Football  <img src="oid://image/play2" title="" alt=""></span></p>
</a>


<script type="text/javascript">
jQuery(document).ready( function() {
jQuery("a.youtube").click(function() {
var youtube_id = this.href.match(new RegExp("(youtube.com/watch\?v=|youtu.be/)([a-zA-Z0-9_-]+)", "i"));
if(youtube_id) {
youtube_id = youtube_id[2]; //VIDEO-ID
jQuery.fancybox({
'autoScale'	: false,
'transitionIn'	: 'elastic',
'transitionOut'	: 'elastic',
'overlayColor' : '#000',
'overlayOpacity' : 0.90,
            'width' : 820,
            'height' : 461,
'title'		: this.title,
'href'		: "https://www.youtube.com/embed/" + youtube_id + "/",
'type'		: 'iframe'
});
return false;
}
});
});
</script>

Alles anzeigen

Peter B.

Ok, danke. Probier ich mal

YouTube-Videos in Lightbox

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?