Einbinden von MP4-Videos responsive
Wär es nicht super, wenn man ein Video direkt im Text platzieren zu können? Auch das ist möglich.
Voraussetzung ist ein Script, welches man in template/inc_script_frontend_redner/ platziert. Als Basis habe ich das abgeänderte Standard-Script videoplayer.php genutzt. Im Script muss, je nachdem wo man seine Videos platziert, der Pfad im Script anpasst werden.
[ mp4-im-text ]964-Classic-Targa[ /mp4-im-text ]
das von mir genutzte Script:
<?php
// Script um MP4-Videos über Shortcodes einzubinden
// Shortcodes:
// [mp4-im-text]Videoname[/mp4-im-text]
// [mp4-im-text-fancybox]Videoname[/mp4-im-text-fancybox]
// Pfad: template/01-bs-template/video/
function createMp4imText($matches) {
// Prüfen, ob öffnender und schließender Tag übereinstimmen
if (empty($matches[2]) || strtolower($matches[1]) !== strtolower($matches[3])) {
return ''; // ungültiger Shortcode
}
$video_name = basename($matches[2]); // Videoname absichern
$safe_name = htmlspecialchars($video_name, ENT_QUOTES);
$video_path = "template/mein-pfad/video/{$video_name}.mp4";
$poster_path = "template/mein-pfad/video/{$video_name}.jpg";
// Fallbacks definieren
if (!file_exists($video_path)) {
$video_path = "#"; // oder ein Standard-Video-Link
}
if (!file_exists($poster_path)) {
$poster_path = "template/mein-pfad/video/video_placeholder.webp"; // Platzhalterbild
}
$mp4_im_text = '';
$tag = strtolower($matches[1]);
if ($tag === 'mp4-im-text') {
$mp4_im_text = '
<div class="col-12 col-sm-5 col-lg-4">
<div class="ratio ratio-16x9 float-start me-3" style="max-width: 100%;">
<video preload="metadata" controls class="w-100" poster="' . $poster_path . '">
<source src="' . $video_path . '" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>';
} elseif ($tag === 'mp4-im-text-fancybox') {
$mp4_im_text = '
<div class="col-12 col-sm-5 col-lg-4 float-start me-3">
<div class="youtube-player-02">
<a data-fancybox data-width="1500" data-height="844" controls title="' . $safe_name . '" href="' . $video_path . '" role="link">
<div class="play"></div>
<img loading="lazy" alt="' . $safe_name . '" class="img-fluid" src="' . $poster_path . '">
</a>
</div>
</div>';
}
return $mp4_im_text;
}
// Shortcodes ersetzen
$content['all'] = preg_replace_callback(
'/\[(mp4-im-text-fancybox|mp4-im-text)\]([a-zA-Z0-9\-_]+?)\[\/(mp4-im-text-fancybox|mp4-im-text)\]/i',
'createMp4imText',
$content['all']
);
MP4 Video im WYSWYG Artikel
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
MP4 Video in Fancybox abspielen (WYSIWYG)
Hier wird eigentlich nur ein Bild angezeigt, aber beim Klick öffnet sich das Video mit Autoplay in einer Fancybox. Das Video/Bild ist in einem Fließtext.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.