Webseiten und Videos ...
Egal, welche Video's man in seine Seite integrieren möchte, ob in eine HTML-Seite oder ein CMS, man kann es sich schwer machen ... d.h. man erstellt eigene passende DIV Container und macht das Ganze dann responsive.
Hat man aber jedoch Bootstrap sowieso schon geladen, gestaltet sich das Ganze erheblich einfacher, denn die benötigten Klassen sind in Bootstrap schon enthalten.
Ein Container rum um das Video passend zu platzieren, fertig.
<!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div>
Youtube Video mit Fancybox Media
wenn man in der /template/lib/inc_script/frontend_render/fancyBox.php noch das entsprechende Helper Script lädt und in der jquery.fancybox.js die Anweisung einträgt können in der Fancybox auch z.B. Videos angezeigt werden.
Da das Video nicht vorgeladen wurde, sollte das konform sein mit der DSGVO (hoffe ich mal)
Eine weitere Möglichkeit ist ...
ein Video anstatt einem Bild in einem Text
Ein Video direkt in einem Wyswyg Artikel oder in einem News-Bereich? Das geht, wie hier zu sehen ist, und das Ganze auch noch Responsiv mit Fließtext. Wie das im Newsbereich aussehen könnte sieht man hier (Link zu dem Newsbereich). Wie geht das denn? Mit einem Script.
Drauf gekommen bin ich durch ein Script was wieder mal unter frontend_render zu finden ist, welches ich aber in der Originalen Version nicht zum Laufen gebracht habe. Also hab ich mit Teilen aus dem Script ein neues gemacht. Etwas CSS dazu, und schon lässt sich ein Youtube-Video egal wo in irgendeinem Text unterbringen. Ich finde - eine Coole Sache!
Da das eigentliche Video erste geladen wird, wenn man auf das Bild klickt, sollte auch das DSGVO-Konform sein.
Fließtext um das Video: 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.
Youtube Video über Artikelinhalt - HTML
Youtube Video über Artikelinhalt - HTML
Das von mir verwendete Script:
<?php
// ----------------------------------------------------------------
// obligate check for phpwcms constants
if (!defined('PHPWCMS_ROOT')) {
die("You Cannot Access This Script Directly, Have a Nice Day."); }
// ----------------------------------------------------------------
function phpwcms_embed_api($matches) {
if(empty($matches[2]) || strtolower($matches[1]) !== strtolower($matches[3])) {
return '';
}
$matches[1] = strtolower($matches[1]);
$videoId = htmlspecialchars($matches[2], ENT_QUOTES, 'UTF-8');
$player = '';
if ($matches[1] == 'youtube') {
$uniqueId = 'yt_' . uniqid();
// YouTube Embed mit Play-Button Overlay
$player = '
<div class="col-12 col-sm-5 col-lg-5 me-3 float-start youtube-video">
<div id="'.$uniqueId.'" class="youtube-player w-100 " data-id="' . $videoId . '">
</div>
<figcaption>
Bei Klick wird das Video vom YouTube Servern geladen.
<a class="tip fancybox_iframe" data-bs-original-title="Datenschutzerklärung von Google" data-width="1500" data-height="844" target="_blank" rel="noopener noreferrer" href="https://policies.google.com/privacy">
Details siehe Datenschutzerklärung.
</a>
</figcaption>
</div>
<script async>
document.addEventListener("DOMContentLoaded", () => {
const container = document.getElementById("'.$uniqueId.'");
if (!container) return;
const videoId = container.dataset.id;
// Thumbnail Container
const div = document.createElement("div");
div.dataset.id = videoId;
const thumbNode = document.createElement("img");
thumbNode.loading = "lazy";
thumbNode.alt = "YouTube Video";
thumbNode.src = "https://i.ytimg.com/vi/" + videoId + "/maxresdefault.jpg";
thumbNode.className = "img-fluid";
div.appendChild(thumbNode);
// Play-Button Overlay
const playButton = document.createElement("div");
playButton.className = "play";
div.appendChild(playButton);
// Klick zum Laden des iFrames
div.addEventListener("click", () => {
const iframe = document.createElement("iframe");
iframe.src = "https://www.youtube-nocookie.com/embed/" + videoId + "?autoplay=0";
iframe.width = "100%";
iframe.height = "315";
iframe.frameBorder = "0";
iframe.allowFullscreen = true;
iframe.allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
iframe.title = "YouTube-Video Player";
container.innerHTML = "";
container.appendChild(iframe);
});
container.appendChild(div);
});
</script>';
}
elseif($matches[1] == 'youtube_fancybox') {
// Fancybox mit Play-Button Overlay, Caption unverändert
$player = '
<div class="col-12 col-md-5 youtube-datenschutz float-start me-3">
<figure>
<a class="tip" data-fancybox data-width="1500" data-height="844" href="https://www.youtube.com/watch?v='.$videoId.'" aria-label="YouTube-Video öffnen (externer Inhalt)">
<div class="youtube-player-02">
<img loading="lazy" class="img-fluid" alt="Vorschaubild eines YouTube-Videos" src="https://img.youtube.com/vi/'.$videoId.'/maxresdefault.jpg">
<div class="play"></div>
</div>
</a>
<figcaption>
Bei Klick wird das Video vom YouTube Servern geladen.
<a class="tip fancybox_iframe" data-bs-original-title="Datenschutzerklärung von Google" data-width="1500" data-height="844" target="_blank" rel="noopener noreferrer" href="https://policies.google.com/privacy">
Details siehe Datenschutzerklärung.
</a>
</figcaption>
</figure>
<noscript>
<p>
<a href="https://www.youtube.com/watch?v='.$videoId.'" target="_blank" rel="noopener noreferrer">
Video direkt auf YouTube ansehen
</a>
</p>
</noscript>
</div>';
}
// Kein zusätzliches schließendes </p> Tag
$player = preg_replace('/<\/p>/', '', $player);
return $player;
}
$content['all'] = preg_replace_callback('/\[(youtube|youtube_fancybox)\]([a-zA-Z0-9\-_]+?)\[\/(youtube|youtube_fancybox)\]/i', 'phpwcms_embed_api', $content['all']);
Youtube Video (WYSIWYG)
Video in einem Fancybox Iframe
Ein Youtube Video das in einen Fancybox Iframe öffnet. Auf dem Video liegt eine Overlay Bilddatei mit Link zu Datenschutzerklärung von Google. Das Video wird erst geladen wenn man auf das Bild klickt.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, 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.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet