Bonjour,
Pour incruster une vidéo en fond de page, il faut:
Positionner un champ ZTR sur la page, puis éditer le code source html en intégrant l'exemple du code suivant:
<p style="text-align: center;"><video poster="elephants.jpg" id="bgvid" playsinline="" autoplay="" loop="">
<source src="elephants.webm" type="video/webm"></video>
</p>
<div id="elephants"><source src="elephants.mp4" type="video/mp4"><p></p><div id="elephants">
<h1 style="text-align: justify;">
Maetaman Elephant Camp, Chiang Mai – Half a day with the gentlest of giants
</h1>
<p></p><p style="text-align: justify;">
Charles has spent a fair amount of time tracking elephants in the wild in Southern India several moons ago.I’ve been faced with one only at a sanctuary as a little child. When I heard about Chiang Mai’s Elephant camps and forest walks, I jumped into it without thinking twice. The fact that I was intending on doing something completely outside of my comfort zone, hit me only too late. But before that, I had to pick from Chiang Mai’s exhaustive list of Elephants Camps and Nature Parks.
</p>
<p style="text-align: justify;">
The Maetaman Elephant Camp is 1 hour away, the tour is from 1:00 pm to 6:30 pm, costs 3000 THB per head, includes transport, feeding, bathing & learning to ride elephants.
</p>
<button>
Pause
</button>
<object type="pcsoft/webdev" data-webdev-id="img_vst12410b"></object>
</div>
Créer ensuite un fichier (css) video.css avec le code suivant :
body {
margin: 0;
background: #000;
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('//elephants.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
.stopfade {
opacity: .5;
}
#elephants {
font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
font-weight:100;
background: rgba(0,0,0,0.3);
color: white;
padding: 2rem;
width: 33%;
margin:2rem;
float: right;
font-size: 1.2rem;
}
h1 {
font-size: 3rem;
text-transform: uppercase;
margin-top: 0;
letter-spacing: .3rem;
}
#elephants button {
display: block;
width: 80%;
padding: .4rem;
border: none;
margin: 1rem auto;
font-size: 1.3rem;
background: rgba(255,255,255,0.23);
color: #fff;
border-radius: 3px;
cursor: pointer;
transition: .3s background;
}
#elephants button:hover {
background: rgba(0,0,0,0.5);
}
a {
display: inline-block;
color: #fff;
text-decoration: none;
background:rgba(0,0,0,0.5);
padding: .5rem;
transition: .6s background;
}
a:hover{
background:rgba(0,0,0,0.9);
}
@media screen and (max-width: 500px) {
div{width:70%;}
}
@media screen and (max-device-width: 800px) {
html { background: url('//elephants.jpg') #000 no-repeat center center fixed; }
#bgvid { display: none; }
}
Cliquer sur description du projet et sur Ambiance Styles.
Cliquer sur Feuilles de styles CSS libres et ajouter le fichier video.css que vous venez de créer, puis valider.
Retourner sur votre page, puis touche F2 pour entrer le code javascript en cliquent sur le bandeau Chargement(onload)qui passe du vert au bleu.
Entrer le code suivant :
var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#elephants button");
if (window.matchMedia('(prefers-reduced-motion)').matches) {
vid.removeAttribute("autoplay");
vid.pause();
pauseButton.innerHTML = "Paused";
}
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function()
{
vid.pause();
vidFade();
});
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "Pause";
} else {
vid.pause();
pauseButton.innerHTML = "Paused";
}
})
Pour la demo : http://94.23.3.137:745/FR/index.awp
Bon développement