menu
Ad goes here

Monday, 29 May 2017

How to create a full screen video background?

ADVERTISEMENT

Website design play the vital role of any successful business. If you are trying to get more sales then you have to concentrate on your website design and adding video background is one of the most important ways to enhance the design with extra visual appeals.

If you choose suitable video content then it might be easier to convince your visitors to connect with your business. Recently I am working in a project where customer like to use a video background and during the implementation I have browsed several websites and saw few are good and also found few are with drawback.

Here is the easiest way which I have used in my recent work.

Step I – Create video or download and convert it in three required formats:
First you need to create a video based on your business services and for that you may need to contact a person or company who create promotional video. Make sure that promotional video showing your services properly and user easily can connect with the video content.

For now we will use a free video from this website http://coverr.co/ which is completely free and you can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission. See license – Click here

The site http://coverr.co/ site provide all three required formats for implementing video on the web.
  1. MP4
  2. Ogg
  3. WebM


If you created your own video or downloaded from other website then you have to convert it in above mentioned format. Here is one of the best tool which I like most to convert video easily - http://www.mirovideoconverter.com/

Step II – Let’s check how you can add video:
To add video in a HTML file you have to include the video in three separate formats as in below HTML tags.
<video class="video" id="24xhtml-video" loop="" muted="">
  <source src="ad_banner.mp4" type="video/mp4"></source>
  <source src="ad_banner.ogv" type="video/ogg"></source>
  <source src="ad_banner.webm" type="video/webm"></source>
  Your browser doesn't support HTML5 video. Please download it from here <a href="https://www.blogger.com/blogger.g?blogID=1546945509629472373#" target="_blank">link</a>.
</video>


Step III – Let’s write few CSS lines which make the video full screen and content based:
html,body,video {margin: 0;padding: 0;}
html,body {height: 100%;font-family:Arial}
.content {
  position: relative;
  top: 25%;
  z-index: 2;
  margin: 0 auto;
  max-width: 768px;
  text-align: center;
}

.content-title {
  margin-bottom: 20px;
  color: #fff;
  font-size: 32px;
}

.content-desc {
  margin-bottom: 20px;
  color: #fff;
  font-size: 22px;
}
.content-desc a {color:#fff}
.video {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
Step IV – Let’s write few JavaScript to play the video:
Add following lines at the end of the page.
<script>
(function() {
  var video = document.getElementById("24xhtml-video");
  video.addEventListener( "canplay", function() {
    video.play();
  });
})();
</script>
Here is the complete HTML file/ document:
<html lang="en"><head>
  
  
  <title> How to create a full screen video background?</title>
  
  
  <style type="text/css">
html,body,video {margin: 0;padding: 0;}
html,body {height: 100%;font-family:Arial}
.content {
  position: relative;
  top: 25%;
  z-index: 2;
  margin: 0 auto;
  max-width: 768px;
  text-align: center;
}

.content-title {
  margin-bottom: 20px;
  color: #fff;
  font-size: 32px;
}

.content-desc {
  margin-bottom: 20px;
  color: #fff;
  font-size: 22px;
}
.content-desc a {color:#fff}
.video {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
  </style>
</head>
<body>
  
<div class="content">
  <h1 class="content-title">
www.24xhtml.com</h1>
<div class="content-desc">
contact@24xhtml.com</div>
<div class="content-desc">
f: <a href="https://www.facebook.com/24xhtml">https://www.facebook.com/24xhtml</a></div>
<div class="content-desc">
t: <a href="https://twitter.com/24xhtml">https://twitter.com/24xhtml</a></div>
</div>
<!-- /content -->

<video class="video" id="24xhtml-video" loop="" muted="">
  <source src="ad_banner.mp4" type="video/mp4"></source>
  <source src="ad_banner.ogv" type="video/ogg"></source>
  <source src="ad_banner.webm" type="video/webm"></source>
</video><!-- /video -->

<script>
(function() {
  var video = document.getElementById("24xhtml-video");
  video.addEventListener( "canplay", function() {
    video.play();
  });
})();
</script>


</body>
</html>

Download Form Validation Sample Download Form Validation Demo


3 comments:

  1. This is a very well written post, my compliments.

    ReplyDelete
  2. Amazing article!!!! Thanks for such a wonderful blog....

    ReplyDelete

Books for you (Crafted with )