Datenschutzerklärung verpflichtend

[cmb]

Ich denke die Zeile im Skript müsste richtig heißen:

Code: Select all

iframe.frameBorder = 0;

Oder?

Auf jeden Fall ist das viel richtiger als meine Variante. Allerdings braucht man das wohl gar nicht mehr, sondern kann denselben Effekt auch per CSS {border:none} erreichen. Zumindest spezifiziert HTML 5.2 wohl kein frameborder Attribut mehr.

[Ralf H.]

Habe jetzt gelesen, dass das einbetten von Fremdvideos urheberrechtlich erlaubt ist.
Sofern allerdings ein anderes Vorschaubild verwendet wird, kann es Probleme geben.

Die sicherste Lösung für Fremdstreams wäre also:
1) Original Youtube-Vorschaubild auf eigenen Server laden.
2) Dieses wird mit einem Datenschutztext über das abzuspielende Video gelegt.
3) Nach bestätigen des Textes wird das Video abgespielt.

Meine ca. 60 Trainingsvideos habe ich alle selbst erstellt. Urheberrechtverletzung wird mich also nicht betreffen.
3 Eingebettete Fremdvideos habe ich jetzt ausgebettet und sind nur noch verlinkt.

lg,
Ralf

[Ralf H.]

Kann die Videos nicht im fullscreen abspielen.
allowfullscreen wird im code immer sofort gelöscht vom Editor.

Kann es daran liegen, dass es kein iframe mehr ist?!

[frase]

Kann die Videos nicht im fullscreen abspielen.
allowfullscreen wird im code immer sofort gelöscht vom Editor.

Kann es daran liegen, dass es kein iframe mehr ist?!

No, Sir.
Das Skript muss erweitert werden:

Code: Select all

document.addEventListener("DOMContentLoaded", function () {
    var each = Array.prototype.forEach;
    var images = document.getElementsByClassName("xxx");
    each.call(images, function (image) {
        image.addEventListener("click", function () {
            var iframe = document.createElement("iframe");
            iframe.src = image.getAttribute("data-src");
            iframe.width = image.width;
            iframe.height = image.height;
            iframe.frameBorder = 0;
            iframe.allowfullscreen = 1;
            image.parentNode.replaceChild(iframe, image);
            iframe.setAttribute('allowFullScreen', 'true') // ***NEU***
        });
    });
});

Wobei statt 'true' sicher auch '' (zwei einfache Anführungszeichen) gehen dürfte.
"xxx" ist dein ClassName.
Und "iframe.allowfullscreen = 1;" dürfte überflüssig sein - ausprobieren.

[cmb]

Und "iframe.allowfullscreen = 1;" dürfte überflüssig sein - ausprobieren.

Das sollte wohl `iframe.allowfullscreen = true` lauten; dann könnte das eingefügte setAttribute entfallen.

[frase]

Das sollte wohl `iframe.allowfullscreen = true` lauten; dann könnte das eingefügte setAttribute entfallen.

Nein, damit funktionierte es ja nicht.
(Die '1' war noch ein Test von mir.)

[Ralf H.]

Das Skript muss erweitert werden:

Code: Select all

document.addEventListener("DOMContentLoaded", function () {
    var each = Array.prototype.forEach;
    var images = document.getElementsByClassName("xxx");
    each.call(images, function (image) {
        image.addEventListener("click", function () {
            var iframe = document.createElement("iframe");
            iframe.src = image.getAttribute("data-src");
            iframe.width = image.width;
            iframe.height = image.height;
            iframe.frameBorder = 0;
            iframe.allowfullscreen = 1;
            image.parentNode.replaceChild(iframe, image);
            iframe.setAttribute('allowFullScreen', 'true')
        });
    });
});

Genau so geht es bei mir. Danke.

Ist es also so, dass alle wählbaren Optionen von Youtube jetzt in das Script geschrieben werden müssen?
Es scheint so zu sein, dass zusätzliche youtube-Optionen automatisch vom Editor gelöscht werden. Ist teilweise auch gut so.

Ich werde jetzt meine kompletten Youtube-Eintragungen der Page in Xamp ändern und anschließend online stellen.
Leider geht es nicht durch suchen-ersetzen in notepadd++, da die Formatierungen teilweise leicht unterschiedlich sind.

Edit:
Fertig. Alle Videos ersetzt. Ca. 80 % gingen doch per notepad++ suchen-ersetzen.
Das Schöne ist, dass jetzt alle Videos den selben "gereinigten" Code haben.

[cmb]

Fertig. Alle Videos ersetzt. Ca. 80 % gingen doch per notepad++ suchen-ersetzen.
Das Schöne ist, dass jetzt alle Videos den selben "gereinigten" Code haben.

Sehr gelungen, finde ich.

Kleiner Verbesserungsvorschlag: folgendes CSS könnte noch ergänzt werden:

Code: Select all

.youtube_privacy {
    cursor: pointer;
}

Und ein sinnvolles alt Attribut für die Vorschaubilder wäre wohl auch gut.

Ist es also so, dass alle wählbaren Optionen von Youtube jetzt in das Script geschrieben werden müssen?
Es scheint so zu sein, dass zusätzliche youtube-Optionen automatisch vom Editor gelöscht werden. Ist teilweise auch gut so

Der Editor weiß nichts von YouTube; der sieht nur ein <img>, und schmeißt Attribute raus, die als ungültig konfiguriert sind. Daher habe ich im Addon für die YouTube-URL ein data-src Attribut genutzt, das das entsprechende src Attribut des Iframe setzt. Entsprechend könnte man Bedarf weitere solche data-* Attribute verwenden (die sollte der Editor in der Voreinstellung akzeptieren).

Das Schöne ist, dass jetzt alle Videos den selben "gereinigten" Code haben.

Noch bereinigter könnte es werden, wenn man das per Pluginaufruf erledigen könnte. Im WYSIWYG-Editor sähe das dann natürlich ganz anders aus als in der (Vor-)Ansicht, aber das könnte sogar von Vorteil sein. Vielleicht mag das jemand umsetzen?

Und dann gibt es auch noch https://github.com/davidstutz/cmsimple-youtube, das das vielleicht schon alles möglich macht?

[frase]

@Ralf
Ja, sehr schön.
Eines solltest du allerdings noch tun:
http://www.badminton-tips.de/?Badminton ... :Aufschlag
= alles o.k.
http://www.badminton-tips.de/?Badminton ... nton-Angel
= heller Rand oben und unten um das Vorschaubild
Das liegt an den verschiedenen Templates.
ferrariclub_training und ferrariclub_praxis müssen noch angepasst werden. D.h. "elastic-video" in ferrariclub_praxis.

Und dann gibt es auch noch https://github.com/davidstutz/cmsimple-youtube, das das vielleicht schon alles möglich macht?

Dort fehlt noch das "nocookie".

[Ralf H.]

Eines solltest du allerdings noch tun:
http://www.badminton-tips.de/?Badminton ... :Aufschlag
= alles o.k.
http://www.badminton-tips.de/?Badminton ... nton-Angel
= heller Rand oben und unten um das Vorschaubild
Das liegt an den verschiedenen Templates.
ferrariclub_training und ferrariclub_praxis müssen noch angepasst werden. D.h. "elastic-video" in ferrariclub_praxis.

Stimmt!
Habe 5 verschiedene Templates und die Änderung bei 4 vergessen.

Jetzt teilt mir mal bitte mit, wie ihr solche Fehler so schnell findet.
Ich klicke jede Seite an und schaue, ob mir was auffällt.
Ihr Profies guckt doch wahrscheinlich auf den Seitenquellcode und seht mit "autischtischem Blick": Pong...da passt was nicht?!

lg,
Ralf