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.