Integrer une vidéo dans un site web
Fermé
dr-lu74
Messages postés
27
Date d'inscription
jeudi 22 novembre 2012
Statut
Membre
Dernière intervention
2 juin 2014
-
17 avril 2014 à 10:23
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 17 avril 2014 à 17:10
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 17 avril 2014 à 17:10
A voir également:
- Integrer une vidéo dans un site web
- Comment télécharger une vidéo youtube - Guide
- Intégrer une vidéo dans un powerpoint - Guide
- Traduire une page web - Guide
- Site de telechargement - Guide
- Amazon prime video - Guide
1 réponse
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
17 avril 2014 à 17:10
17 avril 2014 à 17:10
Salut
je t'explique le principe tu peux faire ca avec html / css plus un petit brin de jquery
tu crée 1 div qui prend tout le site et placée au dessus de tous les div avec z-index et avec une opacity
tu crée une autre avec la video que tu centre avec css et placée au dessus de la précédente avec z-index et positionnée en absolute
et avec jquery tu detecte la fin de la video et tu cache les 2 div précédentes
ca donnerait ca (non testé)
dans le head
ensuite tu fait ca en html juste après <body>
le css
je t'explique le principe tu peux faire ca avec html / css plus un petit brin de jquery
tu crée 1 div qui prend tout le site et placée au dessus de tous les div avec z-index et avec une opacity
tu crée une autre avec la video que tu centre avec css et placée au dessus de la précédente avec z-index et positionnée en absolute
et avec jquery tu detecte la fin de la video et tu cache les 2 div précédentes
ca donnerait ca (non testé)
dans le head
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function () {
$("#mavideo").bind("ended", function() {
$("#coverall").hide(300);
$("#cadrevideo").hide(300);
});
});
</script>
ensuite tu fait ca en html juste après <body>
<div id="coverall"></div>
<div id="cadrevideo">
<video id="mavideo"> ...le code d'appel de ta vidéo ...</video>
</div>
le css
#coverall {
position:fixed;
display:none;
top:0;
left:0;
right:0;
bottom:0;
background-color: #999999;
z-index:900; /* pour être pardessus tous les autres div */
opacity:0.5;
filter: alpha(opacity=50);
}
#cadrevideo {
width:500px;
height:300px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -250px; /* la moitié des width */
z-index:1000;
}
