Javascript - Assigné vidéo à une class ou un id d'une div

Résolu
Angecorse Messages postés 37 Date d'inscription   Statut Membre Dernière intervention   -  
Angecorse Messages postés 37 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Comment va le forum ???

Bèh tout est dans le titre ;)

J'ai du code qui assigne ma vidéo à la balise "body" et je n'y capte rien à JS.
Voici le code actuel : 

<script>
 $(document).ready(function() {
  var videobackground = new $.backgroundVideo($('body'), {
   "align": "centerXY",
   "width": 1280,
   "height": 720,
   "path": "assets/video/",
   "filename": "1511455911",
   "types": ["mp4","ogg","webm"]
  });
 });
</script>


A la place de body j'aimerais que ce soit assigné à 

<div class="video">
   ...
</div>


J'ai tout de même essayé ça sans aucune réussite : 
... var videobackground = new $.backgroundVideo($('div').className="video", {...


J'ai oublié d'ajouter le code lié à la fonction en JS (cela peut servir): 

(function(t){t.backgroundVideo=function(e,i){var n={videoid:"video_background",autoplay:true,loop:true,preload:true};var s=this;s.settings={};var o=function(){s.settings=t.extend({},n,i);s.el=e;d()};var d=function(){var e="",i="",n="",o="",d=s.settings.preload,g=s.settings.autoplay,a=s.settings.loop;if(d){i='preload="auto"'}else{i=""}if(g){n='autoplay="autoplay"'}else{n=""}if(a){o='loop="true"'}else{o=""}e+='<video id="'+s.settings.videoid+'"'+i+n+o;if(s.settings.poster){e+=' poster="'+s.settings.poster+'" '}e+='style="display:none;position:fixed;top:0;left:0;bottom:0;right:0;z-index:-100;width:100%;height:100%;">';for(var l=0;l<s.settings.types.length;l++){e+='<source src="'+s.settings.path+s.settings.filename+"."+s.settings.types[l]+'" type="video/'+s.settings.types[l]+'" />'}e+="bgvideo</video>";s.el.prepend(e);s.videoEl=document.getElementById(s.settings.videoid);s.$videoEl=t(s.videoEl);s.$videoEl.fadeIn(2e3);r()};var r=function(){var t=g();s.$videoEl.width(t*s.settings.width);s.$videoEl.height(t*s.settings.height);if(typeof s.settings.align!=="undefined"){a()}};var g=function(){var e=t(window).width();var i=t(window).height();var n=e/i;var o=s.settings.width/s.settings.height;var d=i/s.settings.height;if(n>=o){d=e/s.settings.width}return d};var a=function(){var e=(t(window).width()>>1)-(s.$videoEl.width()>>1)|0;var i=(t(window).height()>>1)-(s.$videoEl.height()>>1)|0;if(s.settings.align=="centerXY"){s.$videoEl.css({left:e,top:i});return}if(s.settings.align=="centerX"){s.$videoEl.css("left",e);return}if(s.settings.align=="centerY"){s.$videoEl.css("top",i);return}};o();t(window).resize(function(){r()});s.$videoEl.bind("ended",function(){this.play()})}})(jQuery);


Merci javascript et merci à tous pour votre aide ;)


EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici : ICI

Merci d'y penser dans tes prochains messages.
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

Je pense que ceci devrait suffire : 

<script>
 $(document).ready(function() {
  var videobackground = new $.backgroundVideo($('.video'), {
   "align": "centerXY",
   "width": 1280,
   "height": 720,
   "path": "assets/video/",
   "filename": "1511455911",
   "types": ["mp4","ogg","webm"]
  });
 });
</script>

0
Angecorse Messages postés 37 Date d'inscription   Statut Membre Dernière intervention  
 
Hello,

J'avais fait une réponse mais elle n'a pas été posté... Anyway

J'ai trouvé une solution bcp plus simple:

Entre les balise HEAD 
 <script src="assets/js/jquery.js" type="text/javascript"></script>
 <script src="assets/js/app.js" type="text/javascript"></script>
</head>


Entre les balises BODY, à l'endroit où la vidéo doit s'afficher 
<video id="bgVideo" muted src="assets/video/iea.mp4" autoplay="autoplay" loop="true"></video>


Et dans le CSS 
video#bgVideo {
 position: absolute;
 width: 100%;
 height: auto;
 overflow: hidden;
 z-index: -999; 
}


Et ça fonctionne bien comme ça, par contre je précise que j'ai utilisé le framework Foundation V6. La démo sur www.investirenaustralie.com
0

Discussions similaires

c est quoi un ID
claude -
Sortal -

3 réponses