Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<body role="document">
    <header class="masthead" style="top:0px">
         
        <video poster="http://www.planwallpaper.com/static/images/HD-Wallpapers1.jpeg" muted="" loop="" autoplay="" class="video" id="masthead-video">
            <source type="video/mp4" src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4"></source>
            <source type="video/webm" src="video/video.webm"></source>
            Veuillez mettre à jour votre navigateur pour accéder correctement à ce site. 
        </video>
        <div class="muteOptions" onClick="alert('test');">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1024px-Mute_Icon.svg.png" id="masthead-video-mute" onclick="alert('yo');" style="mouse:pointer;"/>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1024px-Mute_Icon.svg.png" id="masthead-video-unmute" onclick="alert('test');"/>
        </div>
        <div class="opener">
        
            <div class="container rel-1">
                
                <div class="row">
                    <div class="text-center col-lg-4 col-lg-offset-4 col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2">
                        <div class="lead" style="visibility: visible;">
                            <p class="lead-text">LA VIE <br />EST BELLE<br />NOS FILMS<br />S'EN<br />INSPIRENT</p>
                        </div>
​
                    </div>
                </div>
            </div>
        </div>
    </header>
 
.masthead{
  position: relative;
  color:#fff;
  z-index:-1;
  overflow:hidden;
}
​
​
​
​
.opener{
  display: table-cell;
  vertical-align: middle;
  width: 1%;
  height: 100vh;
  padding: 100px 0 100px;
}
​
.video{
  position:absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
​
.rel-1
{
    z-index: 1;
    position: relative;
}
​
.muteOptions
{
    z-index: 1;
    position: relative;
}
​
.muteOptions img
{width:20px; background-color:white;}
​
.lead{
  font-size: 32pt;
  margin:30px 0 0;
}
​
.lead-text{
  text-align:center;
  padding: 30px 0;
​
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers