Video on websites

In 2005, YouTube.com changed the internet forever by introducing video as a new medium for all internet users. In 2020, TikTok gained huge popularity and once again unlocked the potential of short videos as the main carrier of content on the internet. Video has therefore become an inseparable part of the internet, and we can also use it on websites. If “a picture is worth a thousand words”, a video makes the message to the audience even stronger.

With a short video on a website, we can attractively present a whole company, a product or a service.

The prepared video should be properly formatted and implemented. An important factor when placing a video on a website is its size. The video cannot be too long, because the whole transfer will be used up downloading it, even though it is buffered. It is also worth thinking about mobile users, who will not always have fast internet, so using a website that is too heavy can affect their experience and also count against you in SEO rankings.

From a technical point of view, to embed video on our website we can use:

• The HTML5 video player built into the browser
• The YouTube, Vimeo, Facebook, TikTok, Twitter and other players

For large files and presentations lasting a dozen minutes or more, it is better to use the streaming services mentioned above, which save server space and transfer, and automatically adjust the video quality to the end user’s connection.

For short presentations we can use the video player built into modern browsers. This gives us full control over the video, with no external service branding and no ads.

The browser’s built-in video player offers a whole range of configuration options:

• Automatic playback: autoplay
• Muting: muted
• Subtitles: track
• Looping: loop
• Full screen

Choosing a video format

The choice of video format matters a great deal, because not all browsers support classic video file formats such as .avi or .mov.

So let’s check which web browsers we should pay attention to when choosing a video format.

The tables above show that our format should play in all of these browsers if we want the video to be available to all users.

Browser engine	Video format
	.OGG	.MOV	.MP4	.WEBM
BLINK (Chrome, Edge, Opera)	+	+	+	+
GECKO (firefox)	+	+	+	+
WEBKIT (Safari)	+	+	+	–

As you can see, most current browsers fully support popular video formats.

 

The deciding factor will therefore be choosing the most optimal file. Let’s see what each video format looks like and how big the file is.

Format .mov – 3.4MB

Format .mp4 – 3MB

Format .webm – 1.6MB

 

As you can see in the videos above, the quality is the same in all of them, while the file size savings are huge: the webm format is less than half the size! So it is worth choosing .webm, but unfortunately it does not work in Safari, which means we should use 2 formats (the browser loads the first format it supports):

<video width="100%" height="500" controls>
  <source src="https://okinet.pl/wp-content/uploads/2022/03/film-testowy.webm" type="video/webm">
 <source src="https://okinet.pl/wp-content/uploads/2022/03/film-testowy.mp4" type="video/mp4m">
This format is not supported in your browser
</video>

Responsive video

When adding a video file or a YouTube iframe, there is no setting that automatically adjusts the width of the video to the size of the browser. There is, however, a CSS trick that makes video responsive.

<style>
.rwd-video{
position:relative;
padding-bottom:56.25%;
padding-top:25px;
height:0;
}

.rwd-video video{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}</style>

It is worth stressing once again that presenting video on a website gives a much stronger and deeper image-building message, which is why it is worth putting videos on websites. On the technical side, make sure the videos are short, and stream the longer ones through dedicated services such as YouTube. Your video should also be saved in modern video formats, .webm plus .mp4, and placed in a responsive container that makes the video player look good on different screens.