HTML5 Video

Prev
Next

HTML5 Video

HTML5 Video is one of the best addition to HTML5 which allows the website to embed a video file on the website.

Prior to HTML5 videos, Flash was a popular choice but it was clumsy.

HTML5 Video

HTML Video Tag

The HTML5 provides a great option to play videos without the usage of flash. For inserting a video on the web page, you can use the <video> tag.

Syntax:
<video controls>
   <source  src=”path_url/file.type”  type=”video/file_type”>
</video>;

Example

<video controls>
  <source src="media/video/HTML5_Dog.mp4" type="video/mp4">
</video>
Run the Code

How to center Video in HTML

If you are familiar with CSS(Cascading Style Sheets), you can add some style to the HTML5 video like centering the video in the web document. The properties like display, margin etc can help to achieve this.

Example

<video controls width="300" style="display:block; margin:0 auto;">
  <source src="media/video/HTML5_Dog.mp4" type="video/mp4">
</video>
Run the Code

Video Loop in HTML

Sometimes, you want to play the video again and again in a loop.

Simply use the loop property along with the <video> tag.

Example

<video controls loop width="300">
  <source src="media/video/HTML5_Dog.mp4" type="video/mp4">
</video>
Run the Code

Video Autoplay

The autoplay property with the <video> tag helps to automatically play the video file when the user visits the web page.

Example

<video controls autoplay width="300">
  <source src="media/video/HTML5_Dog.mp4" type="video/mp4">
    HTML5 video tag is not supported in your browser
</video>
Run the Code

HTML Video Background

To run the video in the background of the website, we can embed the video by simply removing the controls attribute while coding the <video> tag. 

In the example below, we are using a very small video for demonstration but in actual production, you have to use a bigger video so that it can cover the full background. you can also use other properties to cover the entire background using CSS.

Example

<div class="textval">
  <h1>This is my website background video</h1>
  <span>Learn how to create background video using HTML and CSS easily</span>
</div>
<video loop autoplay muted>
  <source src="media/video/HTML5_Dog.mp4" type="video/mp4">
  HTML5 video tag is not supported in your browser
</video>
Run the Code

HTML Video Poster

Using the poster property, there is a way to add a poster on top of the video.

Syntax
<video controls poster=”image_location”>
   <source  src=”path_url/file.type”  type=”video/file_type”>
</video>;;

Example

<video controls width="500" poster="https://i.ibb.co/fFwrRJf/Tutorialbrain.jpg">
 <source src="media/video/HTML5_Dog.mp4" type="video/mp4">
 </video>
Run the Code

HTML Embed YouTube Video

The best way to embed a video is a video from YouTube using <iframe> tag. We are going to discuss about YouTube video in a separate page.

Example

<iframe width="400px" height="250px" src="https://www.youtube.com/embed/TEvO20ZENZo" ></iframe>
Run the Code

Video Remove Download in HTML

By default, HTML5 provides a feature to download the video. To disable the video download option, simply code controlsList=”nodownload”.

Example

<video width="600" height="350" controls controlsList="nodownload">
 <source src="media/video/HTML5_Dog.mp4" type="video/mp4">
</video>
Run the Code

Mute Video in HTML

The muted property allows to keep the video file muted at the beginning.

Example

<video controls muted width="400">
  <source src="media/video/HTML5_Dog.mp4" type="video/mp4">
</video>
Run the Code

HTML Preload Video

The preload helps to control how the page should load so that the user has a good experience.

Example

<video controls preload="auto" width="300">
  <source src="media/video/HTML5_Dog.mp4" type="video/mp4">
</video>
Run the Code

Set Video Speed in HTML

We can control the video speed using javaScript.

Example

<video controls width="300">
  <source src="media/video/HTML5_Dog.mp4" type="video/mp4">
</video>
<script>
document.querySelector('video').playbackRate = 4;
</script>
Run the Code

Responsive Video

A responsive video will fit in all the devices with ease. It will also provide the best user experience. The best way is to set the width as full width of the device using the width:100%. At the same time, you can also add other CSS properties to make it responsive like media queries.

Example of Responsive Video

<video class="video-resp" controls >
  <source src="media/video/HTML5_Dog.mp4" type="video/mp4">
</video>
Run the Code

HTML Video Gallery

Lets create a video gallery using the HTML5 video.

In the below example, we are using only 1 video but you can use multiple videos in your video gallery.

To create the video gallery, you must have basic knowledge of CSS.

Example

div.gallery {
 width: 150px;
 height:150px;
 margin: 5px;
 border: 1px solid #ccc;
 float: left;
 box-shadow: 0 0 4px 5px rgb(0,0,0);
}
div.gallery:hover {
 opacity:0.8;
 background:deepskyblue;
 box-shadow: 2px 2px 10px -1px 
 rgba(0,0,0,0.75);
}
div.text {
 padding: 10px;
 text-align: Left;
}
Run the Code
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!