Hallo zusammen, ich habe mir die Web Designer Premium Software zugelegt und bin dabei eine vorhandene Homepage neu zu gestalten. Es funktioniert bis jetzt auch alles ganz gut, nun bin ich aber an einem Punkt, wo ich auch in den Tutorials und im Handbuch keine richtigen Lösungen gefunden habe.
Es geht um Videos. Kann man auch eine Galerie mit Videos anlegen anstatt mit Bilder? Ich würde mich über eine Antwort sehr freuen.
[...] Kann man auch eine Galerie mit Videos anlegen anstatt mit Bilder? [...]
Ja, man kann. 😊
Wie das im Detail umzusetzen ist, das ist in erster Linie davon abhängig wie Die Lösung aussehen soll.
Beschreibe doch mal etwas detaillierter, wie sich die Video Galerie auf der fertigen Seite präsentieren soll und wie/wo die Videos abgespielt werden sollen.
Idealerweise hast Du schon einen Layout Entwurf fertig, von dem Du uns einen Screenshot zeigen kannst...
Vielen Dank für Deine Antwort BeRo😃
Hier mein Problem. Es geht auf der Homepage um Feuerwerk. Es gibt eine Seite Serviceleistungen auf der alles aufgelistet ist, was angeboten wird. z.B.
- professionelle Höhenfeuerwerke
- Partyfeuerwerke für Geburtstage,
Hochzeiten, Einschulung etc.
- brennende Schriftzüge
- …...
Es wird gewünscht, dass wenn der Kunde auf z.B.Höhenfeuerwerke klickt, sich eine Seite öffnet, auf der dann einige kleine Videos zum auswählen und anklicken sind, die in die Katagorie Höhenfeuerwerke gehören. Das gleiche soll passieren, wenn man die Verlinkung auf Hochzeiten, Geburtstage usw. setzt. Mein Ansatz wäre da jetzt, das über eine Galerie zu machen.
Wenn Du allerdings eine bessere Lösung hast?? Ich bin halt auch ein Anfänger, der mit der Software arbeitet und insgesamt ist es auch erst meine zweite Homepage die entsteht. Ich freu mich, wenn ich hier vielleicht geholfen bekomme und was lernen kann.
[...] Es wird gewünscht, dass wenn der Kunde auf z.B.Höhenfeuerwerke klickt, sich eine Seite öffnet, auf der dann einige kleine Videos zum auswählen und anklicken sind, [...]
Kein Problem. 😇
gehen wir mal davon aus, dass Du die Vorarbeit soweit selbst erledigt hast, dass die gewünschten Unterseiten ("Höhenfeuerwerke", "Partyfeuerwerke", "Hochzeiten", etc.) vorhanden sind, dann musst Du "nur" noch die Videos auf jeder der Galerieseiten "verdrahten" 😊
So kann das im WD Editor aussehen:
In der Vorschau (oder online) werden dann die im Code referenzierten Videos gezeigt, wenn eins der Produktbilder geklickt wird.
Hier kannst Du die lauffähige Projektdatei herunterladen, mit der Du eigene Experimente anstellen kannst.
Das fertige Projekt kann in der Vorschau (oder online) so aussehen:
Hier kannst Du die online Demo sehen, mit 4 (Demo) Produktvideos.
Jedes Video kann, wenn der Seitenbesucher es so haben will, auch in der Vollbild Ansicht gezeigt werden.
Damit alles so funktioniert wie gezeigt, müssen noch ein paar Scriptcodes in das Projekt eingebaut werden. Wenn Du auf der Seite alle Produktbilder- und die Platzhalter für die Videos angelegt hast, kannst Du so weitermachen:
<script>
function CloseAll(){ //alle geöffneten popup Ebenen schließen
var ll=document.getElementsByTagName('div');
for(var i=ll.length-1;i>=0;i--)
{
if(ll[i].id.indexOf("xr_xp")==0){
xr_v0(ll[i]);};};};
</script>
<script>
function videoclose() { //URL aller Mediadateien leeren
var Frame = "";
for (var i = 1; i <= 4; i++) {
Frame = "Frame" + i;
document.getElementById(Frame) .src='';
}}
</script>
<script>
function openlayer(layername) {
videoclose(); //URL aller Mediadateien leeren
CloseAll(); //alle geöffneten popup Ebenen schließen
var o=document.getElementById(layername).parentNode.parentNode;
if(o.id=='') o=o.parentNode;
xr_v1(o); //interne Funktion zum Öffnen einer popup Ebene (Name aus Variable "o" = "layername")
}
</script>
Damit werden 3 Aktionen gesteuert, die für das korrekte Öffnen/Schließen der popup Ebenen- und für das Löschen der 4 URLs der Video Dateien zuständig sind , damit die Videos nicht im Hintergrund weiterlaufen wenn die popup Ebene geschlossen wurde.
Sollen mehr als 4 Videodateien gezeigt werden, muss in der For Schleife der Parameter 4 ("i <= 4;") entsprechend erhöht werden, auf die Anzahl der tatsächlich vorhandenen Videos.
Im den HTML Body der Seite muss noch der Aufruf der Löschfunktion "videoclose()" kopiert werden, der dafür sorgt, dass nach einem reload der Seite eventuell schon aktive Videos aus der letzten Aktivität auf "Null" gesetzt werden.
<body onload = 'videoclose()'>
In den HTML Body jeden Platzhalters kopierst Du nun die folgenden JScript Codes und das HTML iframe:
<script> //ID der aktuellen Ebene festlegen
document.write('<div id="Video1"></div>');
var layername= 'Video1';
</script>
<iframe id="Frame1" width="560" height="280" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<script> //URL der Media Datei festlegen
var Video1 = 'https://player.vimeo.com/video/146176436?title=0&portrait=0&byline=0&autoplay=1&loop=1';
</script>
<script> //Übernahme der URL für die "src=" Angabe im iframe
function media1_open(Link) {
document.getElementById("Frame1") .src=Link;
}
</script>
Im 1. Abschnitt wird der Name der popup Ebene festgelegt, damit später per Link gezielt auf die Ebene zugegriffen werden kann. Hier wird der Name "Video1" verwendet. Natürlich muss für jede Ebene ein eigener Name verwendet werden, der ein Unikat sein muss.
Im 2. Abschnitt steht der HTML iframe Code, der hier nur allgemeine Infos über die Größe und über das Abspielverhalten enthält. Der "src=" Eintrag, mit dem die Videodatei referenziert wird, fehlt. Der wird im nächsten Script angelegt.
Im 3. Abschnitt wird für die Variable "Video1" die URL festgelegt, die mit dem folgenden Script an das iframe übergeben wird. Hier ist das eine URL, die auf ein VIMEO Video zeigt. Natürlich kann jede andere Referenz eingetragen werden, z. B. der Pfad zu einer Video Datei, die irgendwo auf dem Webspace liegt.
Im 4. Abschnitt ist eine JS Funktion abgelegt "media1_open(Link)", die dafür sorgt, dass die URL aus dem darüber stehenden JScript korrekt in den weiter oben stehenden iframe Code übertragen wird
Die Funktion muss in jedem Platzhalter einen anderen Namen haben, z. B. "media1_open(Link)", "media2_open(Link)", "media3_open(Link)", damit später per Link die richtigen Videos in den popup Ebenen angezeigt werden können.
Jetzt fehlen noch die Links auf die einzelnen Videos, die in den popup Ebenen "geparkt" sind.
Um z. B. die popup Ebene "FW1" zu öffnen, der wir oben in einem Scriptcode den Namen "Video1" gegeben haben, tragen wir folgenden Link ein:
javascript:openlayer('Video1'); media1_open(Video1);
Darin sind 2 Funktionsaufrufe enthalten:
Damit die popup Ebenen vom WD auch als solche erkannt- und behandelt werden, muss auf jede Ebene verlinkt werden.
In unserem Fall geht das am besten mit je einem Dummy Link, den wir außerhalb der Seitengrenzen anlegen, damit die Buttons im Layout nicht stören.
Fertig! 😎
Jetzt musst Du's nur noch nachbauen. 😍
Hallo BeRo, vielen Dank für Deine Mühe und Deine Zeit, das Projekt gleich zu demonstrieren, das hilft mir sehr. Jetzt habe ich eine richtig gute Vorlage und da wird mir auch vieles klar, z.B. die 4 Platzhalter. Wie schon gesagt, Anfänger halt aber ich bin froh schon soweit gekommen zu sein und ich denke das mit den Videos, das wird auch noch. Schön das es das Forum gibt und solche Profis wie Dich.😃
Hallo BeRo, jetzt sitze ich am Rechner und fange an, Deine Vorschläge umzusetzen. Da fällt mir gerade auf, dass wenn man für die verschiedenen Feuerwerke jeweils eine neue Seite machen muss, die Navigationsleiste ewig lang wird. Das genau soll nicht so sein. Die Vorstellung ist die, dass man eine Seite z.B. Videos hat und auf dieser Seite dann die verschiedenen "Unterseiten" wie Schulanfang, Hochzeit usw. Vielleicht habe ich mich auch nicht richtig ausgedrückt, hast Du dafür auch eine Lösung??
[...] Da fällt mir gerade auf, dass wenn man für die verschiedenen Feuerwerke jeweils eine neue Seite machen muss, die Navigationsleiste ewig lang wird [...]
Das muss so nicht sein.
Die Zauberformel, mit der Du das Problem leicht lösen kannst, heißt "Untermenü". 😉
In der Hilfe findest Du dazu eine ausführliche Erklärung
Am besten liest Du auch die anderen Einträge zum Suchwort "Navigationsleiste" durch...
Eine für Deine Site passende Menüstruktur könnte z. B. so aussehen:
Wenn es erforderlich ist, kannst Du Untermenüs auch verschachteln, also zu jedem Untermenü noch ein Untermenü anlegen usw.
Du musst nur dafür sorgen, dass der WD nicht alle neu angelegten Unterseiten auch in der Navigationsleiste zeigt. Entferne dazu einfach den Haken aus der entsprechenden Checkbox:
Hat der WD schon Unterseiten in der Navigationsleiste angelegt, kannst Du sie in der NavBar aber ganz einfach löschen. Nach einem Doppelklick auf die Navigationsleiste öffnet sich der Eigenschaften Dialog der NavBar. Da klickst Du auf einen Eintrag und löscht ihn...
Hallo BeRo, herzlichen Dank für Deine Mühe und Hilfe. Ich glaube, ich bin nun auf dem richtigen Weg und ich hoffe, es gelingt mir so, wie es gewünscht wird. Sollte es noch irgendwo "klemmen", würde ich mich nochmal melden. Bin zunächst erstmal beim Durcharbeiten des Handbuches zu diesem Thema.
Hallo BeRo, ich bin langsam am verzweifeln, wie funktioniert das, dass ich Dir mal ein Stück von meinem Projekt schicken kann?
[...] ich bin langsam am verzweifeln [...]
Lass' mich raten...
Du hast Probleme mit Deinem Projekt. 😇
[...] wie funktioniert das, dass ich Dir mal ein Stück von meinem Projekt schicken kann? [...]
Wenn Du hier im Forum Dateien zur Ansicht bereitstellen willst, packst Du die am besten in ein ZIP Archiv und legst sie dann irgendwo auf Deinem Webspace ab. Anschließend veröffentlichst Du hier den Link, über den wir das Archiv herunterladen können.
Den Link kannst Du über das Kettensymbol hier oben, im Editorfenster auch einem Text zuweisen, der dann als Link funktioniert.
Zum Beispiel kannst Du hier die aktualisierte Projektdatei herunterladen, die die Smartphone Variante abdeckt und die alle Feuerwerk-Videos mitbringt, die später aus einem lokalen Speicher geholt werden.
Wenn Du ein ZIP Archiv erstellen möchtest, kannst Du das direkt mit Windows machen (klick).
Um das Archiv auf dem Webspace abzulegen, benutzt Du am besten einen FTP Client, wie z. B. FileZilla.
Dann musst Du uns nur noch die Adresse (URL) zum Archiv verraten, damit wir uns das Problem "aus der Nähe" ansehen können.
Viel einfacher wird es aber, wenn Du Dein aktuelles Problem möglichst genau beschreibst und noch ein paar Screenshots dazulegst. 😊
Screenshots kannst Du direkt mit dem WD erstellen:
Wenn nötig kannst Du sie auch mit dem WD noch aufbereiten (Ausschnitte, Kommentare, etc.) und sie dann direkt im Forum Editor hochladen:
Also, nur Mut, wir "kriegen die Kuh vom Eis"
----------------------------------
Edit 09.02. 0:12 h
Wenn das Deine "alte" Site ist...
...dann schau Dir mal in meiner online Demo an, wie z. B. das Video des Feuerwerks zur Hochzeitsfeier in Deine neue Site eingebunden werden kann:
Sieht doch gut aus, oder? ... 😆
😂😂😂, ich dachte ich bin hier der Fuchs....., ja das sieht gut aus, nur die Umsetzung hatte ich mir etwas einfacher vorgestellt. Ich habe hier ehrlich gesagt noch etwas Bedenken, von der Webseite hier ganz öffentlich zu hantieren.
Also, ich versuche es jetzt nochmal. Ich habe die Variante, die Du mir vorgeschlagen hast versucht so nachzubauen, da uns diese gut gefallen hat. Wir wollen also, dass wenn man auf die Kategoriebilder Feierlichkeiten, Feuerbilder, Einzeleffekte und Höhenfeuerwerk klickt, man dann auf eine neue Seite kommt, auf der dann 3 kleine Videos zu jeder Kategorie ausgewählt werden können. Es soll also nicht über die Navigationsleiste mit Unterkatagorien gearbeitet werden.
Ich denke, das ich dafür 3 Platzhalter pro Katagorie benötige?
[...] dass wenn man auf die Kategoriebilder Feierlichkeiten, Feuerbilder, Einzeleffekte und Höhenfeuerwerk klickt, man dann auf eine neue Seite kommt, auf der dann 3 kleine Videos zu jeder Kategorie ausgewählt werden können. [...]
Dein Screenshot zeigt scheinbar eine andere Lösung. 😋
So, wie es da zu sehen ist, könnte ein für Besucher nachvollziehbarer, logischer Ablauf entstehen.
Zunächst zeigt die Galerieseite die vier Rubriken mit je einem passenden Bild auf der linken Seite. Rechts neben den Rubriken Bildern steht der dazu passende Text, mit einer Beschreibung der Leistungen und/oder Referenzen.
Ein Klick auf das Bild einer Rubrik öffnet die auf einer popup Ebene abgelegten (3) Vorschaubilder der Videos (im Screenshot graue Quadrate).
[...] Ich denke, das ich dafür 3 Platzhalter pro Katagorie benötige? [...]
Richtig, ein Klick auf eins der Vorschaubilder startet das jeweils dazu gehörende Video, das in einem Platzhalter auf einer weiteren popup Ebene liegt. Das gewählte Video kann mit der Methode in ausreichender Größe an einer beliebigen Position der Seite gezeigt werden.
Wenn Du das so umsetzen willst, spricht nichts dagegen, dass Du bald eine neue, attraktive Website hast... 👍
BTW
die popup Ebenen sollten ausschließlich die Objekte enthalten, die nach einem Klick auf den Link zur popup Ebene sichtbar werden.
Und, popup Ebenen, für die kein direkter Link auf der Seite angelegt wird (z. B. die Video pu Ebenen), müssen über einen Dummy Link Button verlinkt werden, der außerhalb der Seitengrenzen liegen sollte. Andernfalls sind sie dauerhaft sichtbar.
Wenn Du neue Ebenen anlegst, achte darauf, dass für die vorhandenen Ebenen die vom WD verlangte Struktur bestehen bleibt. MouseOver Ebenen müssen zwingend direkt über einer MouseOff liegen.
So, nun frisch ans Werk, Du hast sonst sicher ein ganzes Wochenende Langeweile... 😇
Guten Morgen, Deine 3 Fragen zu meinem Sceenshot sind genau richtig so von Dir interpretiert. Ich hatte schon eine andere Lösung fertig, die hatte ich mit den Unterkategorien gelöst, das hat aber dem Chef so nicht gefallen.😏
Das mit der Langeweile ist auch relativ, ich hätte nicht gedacht, dass für die Umstellung soviel Zeitaufwand nötig ist, aber wenn man sich erst einarbeiten muss, ist das wohl so. Ich versuche jetzt Deine Tips wieder umzusetzen, sie sind für mich sehr hilfreich und ich danke Dir für Deine Geduld.
Ich bin soweit, ich gebe auf. Wenn ich meinen Frust über mich selbst abgebaut habe, stelle ich die Seite so um, dass es mit den Unterkategorien abgebildet wird. Ich habe keine Lust mehr, noch mehr Zeit zu investieren. Vielen Dank nochmal für Deine Unterstützung.
[...] Ich bin soweit, ich gebe auf [...]
Schade, denn Du warst auf dem richtigen Weg... 😶
[...] habe keine Lust mehr, noch mehr Zeit zu investieren [...]
Das kann ich nachvollziehen. Wenn man mit der Erwartung an so ein Projekt herangeht, das in ein paar Tagen zu stemmen, ist der Frust schon in Reichweite. 😏
Aber Du hast ja in der kurzen Zeit schon eine Menge geschafft. Schau Dir mal an, wie's fertig aussehen könnte (klick).
Die dazu gehörende Projektdatei- und das Hilfsverzeichnis mit Demo Videos kannst Du hier herunterladen.
ACHTUNG Linkfehler Korrektur! (11.02. - 15:57h)
Ich hatte versehentlich die alte Projektdatei verlinkt. Jetzt stimmt’s aber und Ihr könnt die aktuelle Projektdatei herunterladen…
[...] Wenn ich meinen Frust über mich selbst abgebaut habe, stelle ich die Seite so um, dass es mit den Unterkategorien abgebildet wird. [...]
Vielleicht nimmst Du dazu doch besser die heruntergeladene Projektdatei, dann ist der Weg zum Ziel kürzer. 😍
Sicher tauchen dann noch ein paar Fragen auf, z. B. zum Scriptcode für die popup Ebenen etc. aber Du weißt ja, wo Du Antworten findest... 😇
Also gerne noch einen schönen Rest vom WE
Das ist wirklich sehr nett von Dir, dass Du mich immer wieder motivierst. Ich hatte auch nicht erwartet, dass die Seite mal so eben nebenbei umgestellt und aktualisiert ist aber da ich nun wirklich schon bestimmt 4 Wochen daran arbeite, wird es langsam zäh. Ein großer Teil war auch erstmal die Software selbst. Ich werde es nochmal versuchen, lasse das ganze aber erstmal 2 Tage sacken. Herzlichen Dank für Deine Hilfe.
Die zwei Tage sind um😁 und wir sitzen nun gemeinsam vor dem "Problem". Kann es sein, dass Du mir gestern das falsche Projekt geschickt hast? Es öffnet sich nämlich immer das alte (mit dem schwarzen Hintergrund).
[...] Kann es sein, dass Du mir gestern das falsche Projekt geschickt hast? [...]
Ja, das kann, leider... 😭
Ich habe heute gesehen, dass jemand das Projekt mehrmals hintereinander heruntergeladen hat. Das war Grund genug, um nachzusehen, ob mit dem Download alles i. O. ist. Dabei habe ich dann festgestellt, dass der Link auf die alte Projektdatei zeigte und das gleich korrigiert. 😎 Siehe Zusatzinfo im Kommentar von gestern, 17:34h (klick)
Du kannst das neue Projekt aber auch hier herunterladen, ohne lange zu suchen.
Ich habe eine Frage zu den Videos. Wo stehen die bei Dir?? Ich habe meine alle im You tube.
die anderen Videos auf die ich verlinkt habe, das habe ich über den Platzhalter gemacht.
Deine Variante geht über den Link-Raider. Kannst Du mir das bitte erklären?
[...] eine Frage zu den Videos. Wo stehen die bei Dir? [...]
Du kannst Die Videos völlig frei referenzieren. Solange die Quelle das mp4 Format hergibt, ist es völlig egal, wo die Videos liegen. Du musst nur die korrekte URL in der Liste eintragen, die Du im HTML Body des Video Platzhalters findest:
Weiter unten im HTML Body des Platzhalters findest Du auch die o.- a. JS Funktion "media_open()"
Die übernimmt bei einem Aufruf per Link den mitgegebenen Parameter (z. B. "Video3") und übergibt ihn automatisch an den Video TAG. Der bekommt damit die noch fehlende "src=" Angabe und spielt das übergebene Video ab.
Was Dir zu tun bleibt, ist nur die Verlinkung der Vorschaubilder, mit dem richtigen Video Parameter und die Pflege der URL Liste, damit der Funktion "media_open()" auch die richtigen Videos zum Öffnen übergeben werden. 😊
Das klingt sicher komplizierter als es ist. Probier's einfach mal...
Viel Erfolg
-------------------------------
Edit 17:09 h
Nachtrag zu meinen o. a. Tipps:
Du bist gut beraten, wenn Du Videos ausschließlich mit der gezeigten Methode einbindest, also mit dem Video TAG.
Die direkt per iframe eingebundenen Videos haben diverse Nachteile:
Wenn Du dennoch mit iframes arbeiten willst, die die o. a. Nachteile nicht haben, kommst Du um ein paar weitere Zeilen JavaScript nicht herum.
Melde Dich gerne, falls Du das umsetzen willst... 😇
Bin heute tatsächlich weiter gekommen, die Galerie Seite ist angepasst und gefällt uns gut, habe zunächst die Bilder und die Texte getauscht. Jetzt bin ich dabei die Videos einzubinden. Die Art und Weise wie ich es gemacht habe, habe ich aus dem Handbuch des WD. Ich war froh, dass das funktioniert hat.
Was Du schreibst bezüglich der Nachteile, naja da klingt es vernünftig das also mit dem Video Tag zu machen. Ich habe null Ahnung, was das alles bedeutet, ebenso wenig von einem Java Skript. Aber je länger ich probiere umso mehr verstehe ich langsam, was ich da eigentlich mache und was da im Hintergrund so läuft.
Wir müssen jetzt unsere Videos erstmal alle umwandeln in mp4. Mit einem habe ich getestet, da hatte ich insgesamt 3 Fahler drin, die ich auch gefunden habe. Nun allerdings weiß ich nicht, wo der "Hase" im Pfeffer liegt. Es dreht sich um das Video 3, das habe ich angepasst in der Liste und das soll starten, wenn man das 3.Vorschaubild in der Kategorie Höhenfeuerwerk klickt. Hier der Fehler.
Hier das Skript Stück.
<script> // ID der aktuellen Ebene festlegen
document.write('<div id="Videos"></div>');
var layername= 'Videos';
</script>
<video id="Video" width="100%" height="100%" controls autoplay loop>
<source type="video/mp4" />
Your browser does not support the video tag.
</video>
<script> //URL der Media Datei festlegen
var Video1 = './index_htm_files/Crying_Wolf.mp4';
var Video2 = './index_htm_files/Unicorn_Impressions.mp4';
var Video3 = '
--!!!!!!!!!!!!!!!!!--
var Video4 = 'http://www.magix-website.com/mpfo10/30/80E/80EDEF3062BF11E495844CD25B205291.mp4';
var Video5 = 'http://www.magix-website.com/mpo13/30/4F2/4F2CC8B062C211E4BBA9D9955B205291.mp4';
var Video6 = 'http://www.magix-website.com/mpfo17/30/DC5/DC5DFF5062C311E498B6D0DC5B205291.mp4';
var Video7 = 'http://www.magix-website.com/mpo11/30/95D/95E22C705DAA11E69ACF34375B20618E.mp4';
var Video8 = 'http://www.magix-website.com/mpo08/30/2F8/2F8575E057DE11E586534DF85B20419B.mp4';
</script>
<script> //Übernahme der URL für die "src=" Angabe im Video Tag
function media_open(Link) {
document.getElementById("Video") .src=Link;
}
</script>
[...] Es dreht sich um das Video 3, [...] wenn man das 3.Vorschaubild in der Kategorie Höhenfeuerwerk klickt. Hier der Fehler. [...]
Das Problem ist schnell erklärt:
Der "Schuldige" ist YouTube . Die lassen es nicht zu, dass ein Video über ein Video Tag eingebunden wird. Stattdessen verlangen die eine Einbettung in einen iframe, mit allen schon genannten Nachteilen. 😝
Das heißt für Dich, dass Du entweder alle Videos über YouTube einbindest und das vorhandene Script im HTML Body des Video Platzhalters austauschst gegen einen iframe Code, oder dass Du alternativ die bisher bei YouTube gespeicherten Videos auf einen anderen Server als mp4 Videos kopierst.
Wenn Du den Video TAG gegen einen iframe Code austauschen willst, dann löschst Du einfach den u. a. Code im HTML Body des Video Platzhalters:
<video id="Video" width="100%" height="100%" controls autoplay loop> <source type="video/mp4" /> Your browser does not support the video tag. </video>
und ersetzt ihn durch den folgenden iframe Code:
<iframe id="Video" width="100%" height="100%" allowfullscreen allowtransparency allowautoplay"><p>Your browser does not support iframes.</p></iframe>
Das muss natürlich auch Im Video Platzhalter der Smartphone Variante gemacht werden. Die ID (hier "Video_m") muss übernommen werden.
Der restliche Scriptcode bleibt erhalten. Der sorgt auch dafür, dass die Videos in den iframes nicht ungewollt geladen- und abgespielt werden.
Die Alternative, alle Videos auf einen neutralen Server zu kopieren, ist IMHO aber die bessere Lösung. Du musst Dich dann nicht von YouTube gängeln lassen und Du bist frei in den Einstellungen für die Wiedergabe Deiner Videos... 😊
Die direkt per iframe eingebundenen Videos haben diverse Nachteile:
- Sie werden im Hintergrund geladen, sobald die Seite geöffnet wird. Das wird jeder Smartphone Benutzer "lieben", weil er dann endlich mal seine Flatrate ausreizen kann...😣
- Sie können nicht im "Autostart" Modus geladen werden, weil sie ansonsten alle zeitgleich im Hintergrund abgespielt werden. 😣
- Sie werden i. d. R. an der Position des Vorschaubilds angezeigt 😣
Das würde ich so aber nicht unterschreiben wollen.
Man kann durchaus auch YouTube-Videos so einbinden, dass sie erst auf Klick geladen werden. Auch werden sie nicht zeitgleich alle abgespielt.
Das kann man umsetzen mit der Anleitung von hier.
Der Einbau der YouTube-Videos muss zwingend per "embed-Code" erfolgen; also zB: http s://www.youtube.com/ embed/_w.usw
Nichtsdestotrotz ist für @Skimausi das gezeigte Vorgehen von BeRo so die beste Lösung.
Wollte das nur nicht so stehen lassen. Gruß Marboe
aha, und was ist ein neutraler Server? Beziehungsweise, kannst Du mir etwas empfehlen?