Youtube Video lässt sich nicht skalieren in der Variante Table Website

MarijanSascha-Sekardi schrieb am 15.01.2021 um 04:00 Uhr

Hallo zusammen, ich habe eine Website mit Eurer Hilfe erstellen können, so weit alles fein, nun versuche ich die entsprechend kleineren Seiten anzulegen und nutze dazu die Varianten....nun ist es so, dass ich ein Video per iFrame in ein anderes laufen lasse, per Klick und das Einleitungs-Dauerschleife-Video überlagert wird....mein Problem ist ganz simpel erläutert, ...der iFrame mit dem YT Video wird nicht kleiner und bleibt bei der Größe und Position wie in der StandardVariante....der Videolink ist angepasst auf die neue Größe, ich habe zuvor alle Elemente der Seiten von der Verknüpfung "Teilen auf die anderen Varianten" gelöst usw. .....kann mir da jemand mal auf die Sprünge helfen, ich finde den Fehler nicht

Benutze MAGIX Web Designer Premium 17.1.0.60486  DL x64 Oct 29 2020
Win10 64bit
Hier paar Bilder:

Kommentare

BeRo schrieb am 15.01.2021 um 10:05 Uhr

[...] der iFrame mit dem YT Video wird nicht kleiner und bleibt bei der Größe und Position wie in der StandardVariante [...]

Das liegt daran, dass Du die Videos in den Varianten nicht separat behandelst. Dazu ist es nötig, jedem Video eine eigene ID zu geben und das erfordert dann auch dazu gehörende Funktionen, in denen die neue ID verarbeitet wird.
Du musst also nur die gesamte Video Steuerung doppelt anlegen mit jeweils anderer ID 😉

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

MarijanSascha-Sekardi schrieb am 12.02.2021 um 16:30 Uhr

okay, danke schön, hat funktioniert, wieder was gelernt...aber ...mittlerweile habe ich das geändert und nun ein einfaches MP4 auf der DesktopVariante mit Autostart und nun auch eine auf der MobileVariante,....diese will auf dem Mobilphone aber nicht starten,....braucht es Bilder ?
Ansonsten hier die Seite : www.lass-uns-sprechen.de
Viele Grüße

BeRo schrieb am 12.02.2021 um 17:29 Uhr

[...] MobileVariante,....diese will auf dem Mobilphone aber nicht starten [...]

Die Ursache des Problems ist das vorsätzliche unterdrücken der autoplay Funktion auf mobilen Geräten, durch die Browseranbieter... 😣

Du kannst die Einschränkung umgehen, wenn Du Videos ohne- oder mit unterdrückten Ton anbietest und das im Video Tag dokumentierst.
Da das Video, das Du mit der autoplay Option ausgestattet hast, ohnehin keinen Ton mitbringt, genügt es, wenn Du im Video Tag das Attribut "muted" einbaust. Sinnvollerweise sollte noch das Attribut "playsinline" dazukommen, damit die Geräte aus der i-Family die autoplay Videos nicht in einem separaten Fenster abspielen. 🤓

So kann ein passendes Video Tag aussehen:

<video src="index_htm_files/Bannertest03 - 01b.mp4" muted autoplay loop playsinline width = "100%" height="100%"/>

Probier's mal damit... 😉

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

MarijanSascha-Sekardi schrieb am 12.02.2021 um 18:41 Uhr

KLASSE !! Läuft !! Vielen Dank !!

MarijanSascha-Sekardi schrieb am 12.03.2021 um 14:43 Uhr

Hi Servus, stehe mal wieder auf dem Schlauch....oben die Antwort, wegen des eingebetteten Videos, welches mit javascript: xr_cpu(4); vid_open(); gestartet wird, will nun nicht in der Mobilversion korrekt starten, da sich die Funktionen nicht unterscheiden und anders benannte sein müssen...bin offenbar zu dumm, das zu machen...kann ich bitte einen kleinen Schubser in die richtige Richtung bekommen, ´nen Tritt geht auch ;-)

BeRo schrieb am 12.03.2021 um 15:29 Uhr

[...] Videos, welches mit javascript: xr_cpu(4); vid_open(); gestartet wird, will nun nicht in der Mobilversion korrekt starten [...]

Das ist leider "normal" so.
Der WD verwaltet die Varianten (Desktop, mobil) innerhalb einer einzigen HTML Datei, dabei hält er u. a. die unterschiedlichen Medien Dateien zeitgleich für einen Zugriff bereit.
Damit z. B. eine Video Datei in der mobilen Variante geöffnet werden kann, muss sie gezielt "angesprochen" werden. Der WD generiert dazu beim Export/Upload der HTML Dateien ID Werte, die er in unserem Fall den popup Ebenen mit den Videos zuordnet. Das Video, das Du auf der Desktop Seite zeigst, hat z. B. den ID Wert "4".
Den jeweils zugeordneten Wert siehst Du links unten im Browser Fenster, wenn Du den Mauszeiger auf das YT Logo stellst.

Wenn Du die Aktion bei der Anzeige der mobilen Variante durchführst, siehst Du den passenden ID Wert, der irgendwo im 2-stelligen Bereich liegen kann. Den so gefundenen Wert trägst Du in den Link ein, z. B. so:

javascript: xr_cpu(11); vid_open();

dann wird's funktionieren... 😉

Zuletzt geändert von BeRo am 12.03.2021, 15:30, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

MarijanSascha-Sekardi schrieb am 12.03.2021 um 17:17 Uhr

Servus,....ooookkkayyyyyy, ...da ist beides mal das gleiche drin....
hier die Funktion im Button und die Anzeige der in der DesktopVariante:

dann das was im Browser gezeigt wird


und das jeweils bei einer mobilen Ansicht


und im kleinen Browser

es ist nichts irgendwie verbunden, so dass Änderungen übernommen würden....

 

BeRo schrieb am 12.03.2021 um 17:31 Uhr

[...] da ist beides mal das gleiche drin.... [...]

Sorry, das ist mein Fehler... 😓

Du kannst keinen anderen Link sehen, weil er vorher schon von Dir so angelegt war. Das von mir empfohlene Verfahren funktioniert nur, wenn Du dem Button (YT Logo) zunächst einen Link auf die Video Ebene in der mobilen Variante gibst. Also ganz normal verlinken auf popup Ebene

Danach kannst Du mit der beschriebenen Methode die korrekte ID feststellen, die Du dann im 2. Schritt in den Link übernimmst, der bisher noch die falsche ID "4" hat.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

MarijanSascha-Sekardi schrieb am 12.03.2021 um 18:18 Uhr

Hi nochmal,...okay, nr.11, angepasst, der Klick öffnet nun das Fenster, (auch das Script für das Schließen ist angepasst und funzt) ....es öffnet sich nun nur das Fenster, der Link zum Schließen und man hört den Ton des Film nicht........immer was neues

BeRo schrieb am 12.03.2021 um 19:04 Uhr

[...] und man hört den Ton des Film nicht [..]

Verstehe ich Dich richtig, das Video in der Smartphone Variante wird normal gestartet und läuft, aber ohne Ton?

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

MarijanSascha-Sekardi schrieb am 12.03.2021 um 19:25 Uhr

hi, ne, umgekehrt, der Ton läuft, die Ebene wird angezeigt aber man sieht das Video nicht...

 

BeRo schrieb am 12.03.2021 um 20:31 Uhr

[...] der Ton läuft, [...] aber man sieht das Video nicht [...]

Das passiert immer dann, wenn Du ein Video (iframe) nicht separat behandelst, wie hier empfohlen (klick) 😉
Ohne die Trennung per ID weiß der WD nicht, ob er das Video für die Desktop Version- oder für die mobile Version starten soll.
Aktuell wird das Video für die Desktop Version gestartet, weil der Link in der HTML Seite zuerst gefunden wird. Auf der Seite für die mobile Variante hörst Du daher nur den Ton.

So machst Du es richtig..

Ändere die ID im iframe Code im HTML Platzhalter der mobilen Variante, z.B. indem Du ein "_m" hinzufügst, für "mobil". Mach' also z. B. aus der ID "myiframe" die neue ID "myiframe_m"

<iframe id='myiframe_m' style='border:0px #FFFFFF none;' scrolling='no' frameborder='0' align=aus marginheight='0px' marginwidth='0px' height='237' width='397'scrolling="no">
</iframe>

Sinngemäß dasselbe machst Du mit den JScript Funktionen "vid_open()" und "vid_stop()".
Die bekommen jetzt die neuen Namen "vid_open_m()" und "vid_stop_m()"

<script>
function vid_open_m() {
document.getElementById('myiframe_m') .src="//www.youtube.com/embed/YPZ0VZXXyig?rel=0&autoplay=1";
}
function vid_stop_m() {
document.getElementById('myiframe_m').src='';
}
</script>

Abschließend änderst Du noch die Funktionsaufrufe im YT Symbol und im Button "Video schließen"

Das YT Symbol bekommt den Link "javascript: xr_cpu(11); vid_open_m();"
Der Button "Video schließen" bekommt den Link "javascript: vid_stop_m(); xr_ppc('xr_xp11')"

   

Danach sollten alle Videos wie gewünscht laufen... 😊

Zuletzt geändert von BeRo am 12.03.2021, 20:44, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

MarijanSascha-Sekardi schrieb am 12.03.2021 um 22:36 Uhr

Jaaaaaa, da lag der Haken ....VIELEN DANK !! Das läuft ....danke danke danke !
Manchmal kann man aber auch echt auf dem Schlauch stehen,...ganz lieben und herzlichen Dank !!

BeRo schrieb am 14.03.2021 um 00:34 Uhr

[...] Jaaaaaa, da lag der Haken . [...]

Das war aber nur einer. 😍

In dem JScript mit der Funktion "vid_stop_m()" findest Du noch einen...
Da hast Du die ID des Videos nicht angepasst. Du hast als ID 'Angst3' angegeben. Richtig ist für die mobile Variante aber 'Angst3_m'.

<script>
function vid_open_m() {
document.getElementById('Angst3_m') .src='//www.youtube.com/embed/YPZ0VZXXyig?autoplay=1&modestbranding=1&showinfo=0&rel=0&cc_load_policy=1&iv_load_policy=3&controls=0&rel=0';
}

function vid_stop_m()
{
document.getElementById('Angst3').src='';
}
</script>

Aktuell läuft daher in der mobilen Variante der Ton des Videos weiter, wenn die Ebene ausgeblendet wird... 😩
Wenn Du schon dabei bist, dann kannst Du aus den Argumenten für die Einbettung des YT Videos noch das Doppel von "
&rel=0" am Ende der Argumentkette entfernen. 😉

Ansonsten sieht das Ergebnis Deiner Arbeit aber sehr gut aus. Chapeau! 👍

Zuletzt geändert von BeRo am 14.03.2021, 00:37, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

MarijanSascha-Sekardi schrieb am 14.03.2021 um 01:12 Uhr

Ganz lieben Dank !! Nur mit Deiner Hilfe ist mir das geglückt ....und das was ich da schreibe, über das Warum ist wirklich die Wahrheit,...bzw. die ist sogar noch ein wenig schlimmer....wir sind aber insgesamt 67 Psychologen und knappe 100 Heilpraktiker mit psychotherapeutischer Zusatzausbildung...wir gehen diese soziale Katastrophe zum Selbstkostenpreis an ....DU hast uns das mit ermöglicht, ...vielen lieben DANK! ...wir arbeiten übrigens auch mit dem DRK, dem weißen Ring, den dt.Frauenhäusern und vielen anderen zusammen....ein irres Projekt

Und der Haken,...doch doch, ich habe die alle korrigiert, nur hochgeladen habe ich die dann statt auf die .com auf die www.lass-uns-sprechen.de ......die .com war nur ein Testpfad, den niemand so kennt....aber auch hier wieder, danke für´s Nachsehen !! In die .com kommt nun noch eine anders gestaltete Seite rein....die ein wenig mehr auf Conversion geht...leider müssen wir etwas Marketing berücksichtigen...