PC SOFT

FORUMS PROFESSIONNELS
WINDEVWEBDEV et WINDEV Mobile

Accueil → WEBDEV 2024 → Exemple de création d'une page RWD avec video en fond de page
Exemple de création d'une page RWD avec video en fond de page
Débuté par Xav33, 15 fév. 2017 18:47 - 1 réponse
Membre enregistré
13 messages
Popularité : +1 (1 vote)
Posté le 15 février 2017 - 18:47
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
:D
Membre enregistré
35 messages
Posté le 07 juillet 2018 - 23:09
Bonjour,
J'ai essayer votre exemple mais rien n'a fonctionné je ne sais pas pour quoi.... Vous n'auriez pas un exemple SVP.
Merci.