<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.0.20/jquery.mb.YTPlayer.min.js"></script> <section class="axo-background-video axo-section axo-section-hero axo-section-full axo-section-with-arrow" id="header4-g" data-bg-video="https://www.youtube.com/watch?v=uNCr7NdOJgw"> <div class="axo-overlay" style="opacity: 0.5; background-color: rgb(0, 0, 0);"></div> <div class="axo-table-cell"> <div class="container"> <div class="row"> <div class="axo-section col-md-10 col-md-offset-2 text-xs-right"> <h1 class="axo-section-title display-1">VIDEO BACKGROUND</h1> <p class="axo-section-lead lead">Text par dessus la vidéo</p> <div class="axo-section-btn"><a class="btn btn-lg btn-success" href="#">Bouton 1</a> <a class="btn btn-lg btn-warning" href="#">Bouton 2</a></div> </div> </div> </div> </div> <div class="axo-arrow axo-arrow-floating" aria-hidden="true"><a href="#next"><i class="axo-arrow-icon"></i></a></div> </section>

.axo-section-full { display: table; height: 100vh; padding-bottom: 0; padding-top: 0; table-layout: fixed; width: 100%; } .axo-section { position: relative; padding-top: 120px; padding-bottom: 120px; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } .axo-background-video, .axo-background-video-preview { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .axo-background-video-preview { z-index: 0 !important; } .axo-section-full .axo-background-video, .axo-section-full .axo-background-video-preview { min-height: 100vh; } .axo-section-full .axo-overlay { min-height: 100vh; } .axo-overlay { background-color: #000; bottom: 0; left: 0; opacity: 0.5; position: absolute; right: 0; top: 0; z-index: 1; } .display-1 { font-size: 4.39rem; font-weight: 600; letter-spacing: -2px; margin-bottom: 0.2843em; margin-top: 3.9rem; } .axo-section-hero .axo-section-title { color: #fff; margin-bottom: 1.6875rem; } .axo-section-title { margin-top: 0; } .axo-section-full > .axo-table-cell { width: 100%; } .axo-table-cell { display: table-cell; float: none; padding-bottom: 0; padding-top: 0; position: relative; vertical-align: middle; } .axo-overlay ~ * { z-index: 2; } .container { position: relative; } p.lead, .lead p { font-size: 1.07rem; font-weight: 300; margin-bottom: 2.3125rem; } .lead { font-size: 1.07rem; font-weight: 300; } .lead { font-size: 1.25rem; font-weight: 400; } .btn-sm, .lead a, .lead blockquote, .axo-section-subtitle, .axo-section-hero .axo-section-lead, .axo-cards .card-subtitle, .axo-testimonial .card-block { font-family: 'Lora', serif; } .axo-section-hero .axo-section-lead { color: #fff; font-family: Lora; font-size: 1.5rem; font-style: italic; margin-top: -1em; } .btn-lg { padding: 0.75rem 2.1874rem; font-size: 0.9687rem; line-height: 1.33333; border-radius: 3px; } .btn { font-family: 'Montserrat', sans-serif; font-weight: 500; letter-spacing: 2px; padding: 0.75rem 2.1875rem; font-size: 0.75rem; line-height: 1.5; border-radius: 3px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .btn { margin-bottom: 0.5rem; } .btn-warning { background-color: #f3c649; border-color: #f3c649; box-shadow: none; color: #fff; }