Appearance

Video BG ​

Click to preview the Video BG demo. View demo

Video Background Style 01 ​

Code:

html
<div class="video-bg ">
  <div class="videobox">
    <div class="video">
      <video autoplay="true" height="1080" loop poster="http://demo8.dnngo.net/portals/13/video/poster.jpg" width="1920">
        <source src="http://demo8.dnngo.net/portals/13/video/Book4952.mp4" type="video/mp4" />
        <source src="http://demo8.dnngo.net/portals/13/video/Book4952.ogv" type="video/ogg" />
        <source src="http://demo8.dnngo.net/portals/13/video/Book4952.webm" type="video/WebM" />
        Your browser does not support the video tag.</video>
    </div>
  </div>
  <div class="play"> </div>
  <div class="container pt-60 pb-60">
    <div class="player_boxes full-height">
      <div class="vertical-center">
        <h1 class="player_title">Here Are Your Videos</h1>
        <hr class="player_line" />
        <div class="player_content">
          <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
        </div>
        <p class="pt-20"> <a class="dg-btn-2 radius-5px size-xl btn-white" href="#">VIEW PORTFOLIOS</a> <a class="dg-btn-2 radius-5px size-xl btn-white" href="#">LEARN MORE</a> </p>
      </div>
    </div>
  </div>
</div>

<div class="video-bg ">
  <div class="videobox">
    <div class="video">
      <video autoplay="true" height="1080" loop poster="http://demo8.dnngo.net/portals/13/video/poster.jpg" width="1920">
        <source src="http://demo8.dnngo.net/portals/13/video/Book4952.mp4" type="video/mp4" />
        <source src="http://demo8.dnngo.net/portals/13/video/Book4952.ogv" type="video/ogg" />
        <source src="http://demo8.dnngo.net/portals/13/video/Book4952.webm" type="video/WebM" />
        Your browser does not support the video tag.</video>
    </div>
  </div>
  <div class="play"> </div>
  <div class="container pt-60 pb-60">
    <div class="player_boxes full-height">
      <div class="vertical-center">
        <h1 class="player_title">Here Are Your Videos</h1>
        <h4 class="player_smalltitle">YOU CAN CHANGE THE BACKGROUND BY YOURSELF</h4>        
        <div class="player_content">
          <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
        </div>
      </div>
    </div>
  </div>
</div>