Suche

[Fokuna2]

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

[Olaf / TerraProject]

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:

Code Auswählen Erweitern

<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:

Code Auswählen Erweitern

<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:

Code Auswählen Erweitern

<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:

Code Auswählen Erweitern

.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: