Vidéo d'arrière-plan avec effet de parallaxe

Est-il un moyen de placer une vidéo d'arrière-plan dans un conteneur div avec un effet de parallaxe? Ce que je cherche quelque chose de similaire à ce modèle:

Cliquez ici pour voir l'exemple

J'ai essayé quelques populaire plugins que j'ai trouvé sur internet, tels que:

BigVideo.js

YTPlayer

jquery.videoBG

Mais aucun d'entre eux ne ce que je suis à la recherche ou peut-être qu'ils font, mais je ne pouvais tout simplement pas le comprendre 🙁

Merci à vous tous!!

OriginalL'auteur Nesta | 2014-03-01

  1. 18

    Il y a un plugin qui fait exactement ce dont vous avez besoin ici: https://github.com/linnett/backgroundVideo

    Tout simplement génial! Merci!!!!
    pas de soucis 🙂 n'oubliez pas de voter la réponse jusqu'

    OriginalL'auteur 30secondstosam

  2. 9

    Je voudrais créer l'élément div avec la vidéo HTML5 d'abord, puis de créer la parallaxe défilement. Ajout de la vidéo HTML5 et faisant toute la largeur peut être aussi simple que:

    <video id="myVideo" controls>
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogg" type="video/ogg">
   Your browser does not support the video element.
</video>
<script>
   document.getElementById("myVideo").width=document.body.offsetWidth;
</script>

    Pour la parallaxe, vous aurez besoin de mettre en œuvre séparément. L'élément div avec la vidéo HTML5 va juste être une composante de la page, juste comme n'importe quel autre calque ou de la section de contenu.

    Si vous avez besoin de quelques tutoriels sur la création de sites internet de la parallaxe, mon entreprise a créé une liste de la parallaxe des sites web disponibles (trié par la technologie: jQuery, stellar.js et skrollr.js).
    http://potentpages.com/parallax-tutorials/

    Le Mozilla de référence pour la vidéo HTML5: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

    Merci man! Votre réponse est très utile 😉

    OriginalL'auteur David Selden-Treiman

  3. 1

    Juste au cas où vous êtes toujours à la recherche d'une solution à l'aide de YTPlayer.
    Définir la containment:'self' ou containment:'#elementID' dans le code HTML constructeur où #elementID est l'ID de votre div,section ou de la parallaxe de la section où vous souhaitez que la vidéo à jouer en arrière-plan.

    Reportez-vous à YTPlayer page Wiki ici.

    <div id="P1" class="player" 
     data-property="{videoURL:'http://youtu.be/l_tHTmd5pgk',containment:'self',startAt:50,mute:false,autoPlay:false,loop:false,opacity:.8}">
</div>

    OriginalL'auteur Zakky Akhtar