ik ben er bijna
Het filmpje doet het nu ook op een iphone.
Het enige is nu nog dat het filmpje zich blijft herhalen.
Dat is alleen op een iphone het geval.
Ik heb om het filmpje erachter te krijgen in eerste instantie deze link gevolgd:
https://www.w3schools.com/howto/howt...reen_video.asp
Daar stond deze code:
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
</video>
Hier heb ik het woordje "loop" weggehaald zodat de video in alle browsers afspeelt to het einde en dan stopt.
Nu komt het iphone verhaal:
In de oorspronkelijke code stond dit:
background-image: url("../../images/bg.jpg");
Hier de complete code die de bg regelt:
Code:
#bg {
-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
-ms-transform: scale(1.0);
transform: scale(1.0);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
}
#bg:before, #bg:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#bg:before {
-moz-transition: background-color 2.5s ease-in-out;
-webkit-transition: background-color 2.5s ease-in-out;
-ms-transition: background-color 2.5s ease-in-out;
transition: background-color 2.5s ease-in-out;
-moz-transition-delay: 0.75s;
-webkit-transition-delay: 0.75s;
-ms-transition-delay: 0.75s;
transition-delay: 0.75s;
background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("../../images/overlay.png");
background-size: auto,
256px 256px;
background-position: center,
center;
background-repeat: no-repeat,
repeat;
z-index: 2;
}
#bg:after {
-moz-transform: scale(1.125);
-webkit-transform: scale(1.125);
-ms-transform: scale(1.125);
transform: scale(1.125);
-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
background-image: url("../../images/water6.mp4");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}
body.is-article-visible #bg:after {
-moz-transform: scale(1.0825);
-webkit-transform: scale(1.0825);
-ms-transform: scale(1.0825);
transform: scale(1.0825);
-moz-filter: blur(0.2rem);
-webkit-filter: blur(0.2rem);
-ms-filter: blur(0.2rem);
filter: blur(0.2rem);
}
body.is-preload #bg:before {
background-color: #000000;
}
Ik had deze regel verwijderd uit de code:
background-image: url("../../images/bg.jpg");
Dit omdat de achtergrond image immers werd vervangen door het filmpje
Nu heb ik deze regel vervangen door:
background-image: url("../../images/water6.mp4");
En nu speelt het achtergrondfilmpje wel af op een iphone.
Zoals PHP4U al zei: "Grappig, je kan dus gewoon een mp4-bestand afspelen via een background-image.
Nooit geweten."
Dus in alle normale browers zorgt deze code ervoor dat het fimpje wordt afgespeeld.
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
</video>
En op een iphone zorgt dit ervoor dat het fimpje wordt afgespeeld:
background-image: url("../../images/water6.mp4");
Dus tot zover is het een succes te noemen.
Het allerlaatste wat ik zou willen is dat ook hier ergens iets toegevoegd moet worden waardoor het filmpje niet elke keer opnieuw begint maar stopt op het einde.
In de code staat wel: background-repeat: no-repeat;
Maar hier schijnt het filmpje zich niets van aan te trekken
Ik hoop dat iemand raad weet