Druckbare Version
Wie kann man bei einem Contao 3.5.x auf einen Link eine Lightbox legen und darin ein Video-Element abspielen (ein lokales Videofile, kein YouTube-Film)? Idealerweise sollte sich der Video gleich abspielen beim Klick auf den Link … geht das mit Bordmitteln wie j_colorbox oder j_mediabox?
Finde viele Postings, aber oft für ältere Versionen. Danke für Tipps / working Links!
Schau dir am besten die Docu von colorbox oder mediabox advanced an. Dort müsste stehen, wie man Videos in der Lightbox abspielen kann. Ich meine, in der mediabox reicht es, wenn der Link auf das Video zeigt.
Hallo truni,
ich war am gleichen Thema dran. Ich habe das Video inline eingebunden.
Dafür habe ich mir ein eigenes Inhaltselement mit Custom Elements erstellt.
Damit kann es der Redakteur später sehr einfach anlegen. Das nur nebenbei.
Hier der entsprechende Code:
maxHeight von 750 Pixel: 720 Pixel für das Video + 30 Pixel für die Controls-Leiste. Wenn Du keine Controls benötigst, bleibt es bei 720 Pixel.HTML-Code:$(".inline").colorbox({
inline: true,
width: '95%',
maxWidth:'1280',
maxHeight:'750',
onComplete: function () {
var video_id = $(this).attr('href');
$(video_id).find('video').get(0).play();
}
});
Viel Spaß damit.
Danke btosh – kann ich deine Lösung in einer Art «mappen»*auf meine Problematik?
Wir benötigen nur 1 Textlink, der beim Anklicken die Lightbox (wohl somit die colorbox) öffnet und inline ein contao Inhaltselement anzeigt (in diesem Fall ein Video-Element mit lokal gespeichertem Videofile). Das globale Template sollte nicht verändert werden für j_colorbox, da auf der Website auch noch normale Bildvergrösserungen zum Einsatz kommen.
Ginge ein solcher Aufruf in einer Art wie?
<a href="{{link::ID}}" data-lightbox="inline">Unseren Film anzeigen …</a>
Wie hänge ich an diese Schreibweise die Konfiguration/Settings der Colorbox an?
Danke nochmals, stehe auf dem Schlauch in der Sache …
Habe inzwischen zwei Lösungsansätze gefunden, die funktionieren. Die jQuery-Lösung ist eleganter ;-)
01 Basis Mootols
https://community.contao.org/de/show...ikel-verlinken
HTML
<a href="#mb_inline" rel="lightbox[inline 80% auto]">Link zum Öffnen der Lightbox …</a></p>
<div id="mb_inline" style="display: none;">{{insert_content::ABCD}}</div>
CSS (ad hoc Korrektur für responsive Breite)
#mbCenter video { width:100%; }
#mbCenter .ce_player { margin-bottom: 0 !important; }
02 Basis jQuery
https://www.marcosimbuerger.ch/conta...verwenden.html
HTML
<p><a class="colorbox_content cboxElement" href="#lightbox_content" data-lightbox="lb12345">Link zum Öffnen der Lightbox …</a></p>
<div style="display: none;">
<div id="lightbox_content">{{insert_content::ABCD}}</div>
</div>
JS
j_colorbox.html5 (ergänzen mit Inline-Behandlung)
...
maxWidth: '95%',
maxHeight: '95%'
});
if($(this).hasClass('colorbox_content')){
$(this).colorbox({inline:true});
} else {
$(this).colorbox({inline:false});
}
});
CSS
#cboxLoadedContent { background-color: #000; }
#lightbox_content .ce_player { margin-bottom: 0 !important; }
#lightbox_content video { width:100%; height:auto; }
Hi Truni,
eigentlich ist es noch einfacher. Die Konfiguration der Lightbox definierst Du in deinem Custom jQuery-File. Die Templates von Contao kannst Du so lassen.
Das wäre der Link zum Video:
Und hier wird defniert, dass alle Links mit der Klasse inline mit folgender Colorbox-Konfiguration geöffnet werden:HTML-Code:<a class="inline cboxElement" href="#video_id" data-lightbox="video_id">Video abspielen</a>
HTML-Code:$(".inline").colorbox({
inline: true,
width: '95%',
maxWidth:'1280',
maxHeight:'720',
onComplete: function () {
var video_id = $(this).attr('href');
$(video_id).find('video').get(0).play();
}
});
Ich wollte mal kurz meine Lösungsmöglichkeit mit euch teilen. Eventuell hilft einem oder anderem User weiter.
- Ich habe das ce_hyperlink-Template dupliziert und umbenannt auf ce_hyperlink_lightbox_video.html5
- Füge in die Link-Adresse den Embed-Links von der iframe-tag für externe Videos und für lokale Videos einfach den Pfad angeben.
- Wenn externe Video angezeigt werden soll, setze ich in Lightbox-Feld als rel-attribute das Wort "extern", bei den lokalen Videos bleibt einfach leer.
- Unter Template-Einstellungen beim Inhaltselement Hyperlink wähle ich mein oben erstelltes Template.
Hier mein Templateinhalt:
Die Screenshots habe ich ebenfalls eingefügt.PHP-Code:<?php $this->extend('block_searchable'); ?>
<?php $this->block('content'); ?>
<?php
$externVideo = strpos($this->attribute,'extern');
if($externVideo !== false):
?>
<a href="<?= $this->href ?>" class="external_video hyperlink_txt hyperlink_<?= $this->id ?>" title="<?= $this->linkTitle ?>"<?= $this->attribute ?><?= $this->target ?>><?= $this->link ?>
</a>
<script type="text/javascript">
//<![CDATA[
jQuery(window).load(function(){
jQuery('.hyperlink_<?= $this->id ?>').colorbox({
iframe:true,
fixed:true,
innerWidth:'70%',
innerHeight:'80%'
});
});
//]]>
</script>
<?php else: ?>
<a href="" class="local_video hyperlink_txt hyperlink_<?= $this->id ?>" title="<?= $this->linkTitle ?>"<?= $this->attribute ?><?= $this->target ?>><?= $this->link ?>
</a>
<div style="display:none">
<?php
$videoContent = '<div id="local_videocontent_'.$this->id.'" class="local_videocontent"><video id="video_'.$this->id.'" width="80%" height="auto" class="video" controls><source src="'.$this->href.'" type="video/mp4"></video></div>';
echo $videoContent;
?>
</div>
<script type="text/javascript">
//<![CDATA[
jQuery(window).load(function(){
jQuery('.hyperlink_<?= $this->id ?>').colorbox({
fixed:true,
width:'70%',
height:'80%',
html:'<?= $videoContent ?>'
});
});
//]]>
</script>
<?php endif; ?>
<?php $this->endblock(); ?>