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:
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(); ?>
Die Screenshots habe ich ebenfalls eingefügt.
Lesezeichen