Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


IPhone Problem mit Background-Video
#1
Hallo,
ich habe hier ein Hintergrundvideo
https://www.afripix.de/koi/

Dieses soll nur auf dem PC angezeigt werden.
Für kleinere Geräte gibt es ein Standbild.

Klappt auf Android und PC, aber nicht auf IPhone.
Die entsprechenden Display-Klassen aus Bootstrap 4 sind drin....

Frank
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin,

ich glaube "cover" wird nicht von iOS unterstützt:

https://stackoverflow.com/questions/2415...ing-on-ios

... müsstest Du nach einem "Workaround" suchen ...

Deine CSS:
Code:
.cid-rctA98tQkE {
 background-image: url("../../../assets/images/carp-3.jpg");
 background-position: center center;
 background-size: cover;
 background-attachment: fixed;
 background-repeat: no-repeat;
}

Das Problem mit dem iOS und dem Safari ist einfach, dass das nichts kann und deshalb würde ich mir nie so ein angefressenes Apfel-Teil kaufen :D
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Na ja, wenn Kunde eines hat....
Moment - Du hast recht. Die grüne Ecke, die man auf dem Apfelphone sieht, ist ja gar nicht vom Video. Das ist ja eine Ecke vom Standbild!
Da suche ich ja die ganze Zeit an der falschen Ecke.

DANKE!!!!!!!!!!

So, wir verzichten auf einen fixed-Background und machen parallax. Nun gehts!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Versuche das mal:

Code:
background: url("../../../assets/images/carp-3.jpg") no-repeat top center fixed;
background-size: 100vmax 100vmax;

Ich habe gerade kein iPhone hier :eek: ich habe es hier mal beides auf einer Seite.

Oben "cover" - unten "100vmax":

http://www.mobirise-tutorials.com/Testseiten/Test-User/
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Na, Du treibst ja echt Aufwand Smiling

Aber: oben wie gehabt und unten sieht man gar nix.
Ich nutze zum test übrigens BROWSERSTACK und habe immer noch Reste meiner halben Frei-Test-Stunde.
Die machen das mit echten Geräten, nicht nur mit Emulatoren. Daher sieht man auch die Probleme.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
... da es mit 100vmax und 100vmax am Handy verzerrt (mittleres Bild) habe ich jetzt noch die Breite auf "auto" gestellt (unterstes Bild):

Code:
background: url("../../../assets/images/carp-3.jpg") no-repeat top center fixed;
background-size: auto 100vmax;

http://www.mobirise-tutorials.com/Testseiten/Test-User/
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Wie geht nicht :eek:

Am "Samsung Galaxy S9" geht das. Guckst Du mit einem neuen iPhone? Die Simulatoren kannst Du vergessen, die funktionieren alle nicht.

P.S.:

Töchterchen hat ein iPhone X und gerade geguckt - kein einziger Koi ist zu sehen :eek: :D
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Ich sehe oben den Ausschnitt, dann 2x nix und dann die Blume
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Sie sieht am iPhone X nur die Textblöcke und die Blume - sonst gar nichts
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Browserstack funktioniert, weil die da echte Geräte hinter haben.
Eine Freundin hat ein Apfelphone und es verglichen.

Oben ist nachwie vor der grüne Ausschnitt.
Auch auf meinen Androiden geht das alles
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
gib mir mal den Link zu dem Simulator - ich will noch was anderes testen (andere CSS)

... übrigens "Backstretch" (JavaScript-Lösung) sollte auch am iPhone funzen ....
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
https://live.browserstack.com/

Bekommst 100 Minuten geschenkt. Davon habe ich noch 12.

Backstretch....ja, das geht. Aber das Fixed geht ja nicht bei einem einzelnen DIV.
Ansonsten würde halt immer das Bild geladen und im Hintergrund angezeigt, auch wenn es unsichtbar ist, wenn der Film drüber gelegt wird im PC-Modus. Du verstehst meine wirren Worte?
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
kann auch was mit dem "Parallax" zu tun haben. Habe das jetzt mal am obersten Bild ausgeschaltet

Danke für den Link:

... ach nee - mit Registrieren - das lasse ich jetzt mal lieber :eek:
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
Hallo,
frage doch einfach per Javascript ab ob es sich beim User um ein Mobiblesgerät handelt und wenn ja setzt du die entsprechende classe oder das Bild ein anstatt des Videos

Code:
var isMobile = {
    Android: function () {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function () {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function () {
        return navigator.userAgent.match(/iPhone|iPod|iPad/i);
    },
    Opera: function () {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function () {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function () {
        return ((isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()));
    }
};

function detectDevice() {
    var result = 'No mobile device';
    if (isMobile.any()) {
        result = 'Your on a mobile device';
    }
    alert(result);
};
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
@Andy,

... wozu das denn?

An keinem Handy funktioniert das Hintergrund-Video.

Das könnte also alleine durch eine @media Anweisung mit einem Bild für alle Geräte ersetzt werden (was ohnehin wahrscheinlich die einfachste Lösung wäre).

Was eben am iPhone so nicht funktioniert, ist den gesamten Bildschirm ("cover") mit einem Bild anstelle des Videos zu füllen - das funktioniert an anderen Systemen schon - aber eigentlich ist es doch egal wie groß dann das eigenständige Foto am Handy ist.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
Information Header u. Footer problem css Mario_W 2 114 22.11.2019, 19:02
Letzter Beitrag: Mario_W
  Problem mit gesicherter Seite nof15us 5 114 13.11.2019, 10:10
Letzter Beitrag: nof15us
  Mobiris Publizierungs Problem nof15us 4 105 09.11.2019, 16:22
Letzter Beitrag: nof15us
  iframe statt Video/Bild im Header magfly78 3 108 07.11.2019, 17:08
Letzter Beitrag: magfly78
  Und wieder mal IPHONE stobi_de 6 127 24.10.2019, 21:20
Letzter Beitrag: c-laus
  Php-Webmailer und Mobi - neues Problem stobi_de 24 1.887 23.07.2019, 09:49
Letzter Beitrag: Tommy Herrmann
  background fixed und schiefe Kannten? stobi_de 6 304 26.06.2019, 11:49
Letzter Beitrag: Martin73
  Mobirise-Backstretch Hintergrund Video Thomas Saake 2 236 16.06.2019, 15:06
Letzter Beitrag: Thomas Saake
  Problem mit einem Bildblock aus Mobi4 Theme stobi_de 8 355 07.06.2019, 08:25
Letzter Beitrag: Tommy Herrmann
  visibility: hidden; im IPhone stobi_de 10 463 03.05.2019, 17:01
Letzter Beitrag: stobi_de



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!