Sehr geehrte Damen und Herren,
wie kann man seine YouTubes Video am besten in das PMX einbinden?
Ich würde gerne meine erstellte Videos mittels dem Artikel Modul einbinden so, dass man das Video sieht, nicht den Link.
Ich möchte gerne, dass man dann auf der Seite bleibt und das Video anschauen kann, ohne auf YouTube wechseln zu müssen.
Ich bitte um vorschläge, Tipps
vielen Dank
Am einfachsten über den offiziellen YouTube-Embed-Code mit einem <iframe> und der Viedo-ID. Dann wird das Video direkt auf deiner Seite angezeigt und abgespielt, ohne dass der Besucher zu YouTube wechseln muss.
Das mit dem <iframe> ist aber immer so eine Sache, da du keine wirkliche Kontrolle über die Inhalte des iframes hast. Auch birgt das eine Lücke um Spam o.ä über deine Seite zu laden. Das nur als Hinweis.
Unter Umständen musst du auf deiner Seite in den Einstellungen "HTML-Optionen" unten links die iframes zulassen.
Umsetzung würde folgendermassen aussehen. Bei der EIngabe deines Artikels stellst du den Editor auf "Quellcode" (oben links im cKEditor) um und fügst die Codes unten in deinen Quelltext an der Stelle ein, wo das Video angezeigt werden soll. Nach dem Einfügen und Speichern sollte das Video schon in der Vorschau zu sehen sein.
Beispiel:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEOID"
title="YouTube Video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>Aus dieser normalen YouTube-Adresse:
https://www.youtube.com/watch?v=VIDEOID
wird also:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEOID"
title="YouTube Video"
frameborder="0"
allowfullscreen>
</iframe>Für eine moderne responsive Webseite würde ich es eher so aufbauen:
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube Video"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</div>mit CSS:
.video-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.video-container iframe {
width: 100%;
height: 100%;
border: 0;
}Dann passt sich das Video automatisch an Desktop, Tablet und Smartphone an. Für Deutschland/EU ist noch ein Punkt wichtig: Datenschutz. Statt
youtube.com/embed/
kannst du
youtube-nocookie.com/embed/
verwenden: