Skip to content

Web Page With Video

Web Page With Video

One main thing to keep in mind when creating a web page with video is page speed. Videos can easily be very large files, which adversely affects your page loading time. A website with video is always eye-catching if it is fast. There are several ways to utilize video.

  • Infographics
  • Video banner
  • Education tool

The home page of Glenn Website Design is using a repeating auto-play video. I set the background to a matching color because there is a split-second delay before the video loads. The file size I kept small at 300kb by using a video file reducer. It is a trade-off of page speed for the eye-catching hero slot video. I constantly monitor my page speed with every addition or update.

Page speed by google

Page speed is a critical part of SEO now. Google is really pushing to make all of the internet friendly to mobile phones. Over 60% of Google searches are from mobile devices. No one knows for sure the secret recipe of the Google algorithm but for sure page speed is included.

You should test all of your web pages with the following tools:

PageSpeed Insights This is a Google tool that directly tests page speed. Their standards are pretty high to get a green rating. I have found that on average a rating of 50 to 70 for mobile is very good to get if you have interactive components and a lot of content. Their range sets you, RED 0 – 49, YELLOW 50 – 89, GREEN 90 – 100. But if you want a 90 – 100 score for mobile you need a very basic text-only limited code type page. Google contradicts themselves a little there in the fact they do expect you to make the page interesting and fast. And last note, you should easily be able to get 80 or better for desktop rating.

GTmetrix This tool uses data from PageSpeed insights but takes into account a lot of other factors that Google does not include. You should aim to get an A grade of 90 or better with them.

How to put the video on a web page

There are several ways to deliver the video. You can have a website with youtube video. It is easy using the WordPress block editor just copy the link from youtube and paste it. Personally, I never took the time to understand how Youtube serves up advertisements so I choose not to take a chance and put the videos on my own servers. You can also use Vimeo. I tried in once but then again I worry about their use of advertisements.

If you choose the latter as I do then adding video is no different than adding an image in the block editor.

FOR EXAMPLE:

  • In WordPress block editor
  • Choose cover block
  • Upload – choose a video

Video as background

There are several blocks you can use video as background or just like an image.

Infographics

There are probably thousands of tools for creating infographics. The best online tool I have found is Canva. You create your infographic and just like any other video you can install it to a web page or use it as a post on social media.

Education Informative Video

An educational video is a much larger file size than infographics or a banner has to be. You should set the video to play by controls only. This will prevent the pre-loading of the video by default in HTML 5.

Use of Video

The use of video materials on the website is nowadays the standard. Video is nothing exotic, both when it comes to purely decorative applications or as the actual content of a subpage with an offer or blog article.

Videos used in the background give the website or online store dynamism and are often more visually attractive to the average audience compared to a website with everything standing or using outdated slides. However, videos are no longer just a “wow” effect – they are increasingly used as actual content for the page.

Advantages of hosting-own video materials :

  • control over the format and quality of the placed material,
  • preservation of all copyrights and related rights to the films posted on the website,
  • increased page authority in the case of gaining popularity of a specific file,
  • the ability to easily edit the content of the material,
  • freedom in giving names, metadata, URI addresses,
  • the ability to decide on distribution methods,
  • the ability to impose restrictions and create your own monetization method (e.g. fee for display),
  • self-sufficiency of the website (independence from external websites),
  • playing a movie generates traffic to your website,
  • no ads,
  • the ability to control the UI of the player and introduce your own solutions.

Cons of hosting your own clips and videos :

  • the relatively high cost (both in terms of disk size and consumed transfer),
  • the need to solve many problems related to compatibility and performance on individual devices,

Use of video publishing services like YouTube and Vimeo

The advantage of using external websites to host and share movie clips is, above all, the convenience and automation of work related to the conversion to multiple formats. Using YouTube is really about uploading video in any format, and the conversion of the video and its publication happens by itself. The second advantage may be the fact that our video immediately appears as content in the YouTube search engine, thanks to which the percentage of users will find it directly from it and become familiar with our material.

The advantages of using third-party video publishing sites include:

  • automatic video conversion to friendly formats for almost all devices,
  • saving server resources (space and transfer),
  • the ability to create subtitles and annotations,
  • diversification – channel development on an external website.

The main disadvantage of such a solution is the permanent loss of certain rights (refer to the regulations) to the film we publish, as well as the lack of increase in authority that our website could gain thanks to its publication. The content is not published on our domain – it is located on YouTube. The channel is not ours (it may be closed due to legal issues or the policy of the website itself or a mistake of the moderators).

Remember that this video is not on our blog – this video is on YouTube. By placing a YouTube clip in the content of a blog article, we only link to YouTube – which means that thanks to some kind of trick, the movie can be watched without leaving our website. Posting a blog article on an external website and then only linking to it on your blog would be an irrational practice and no blogger would ever agree to it. Meanwhile, most people do something like that with movies. I bet a lot of people have never thought of it that way.

Optimizing video files for websites

Movies intended for publication on the website (just like photos) can be saved in various formats. Here, too, size matters and some other settings, such as the number of frames per second, bitrate, and even the quality of the audio itself. Knowledge of this subject will allow you to choose them more accurately for a specific application.

Most video compression methods work the same. Keyframes are kind of like a complete photo, and tweened frames contain information about offsets and other transformations. this makes it possible to save video more efficiently with video than in the case of a series of full photos. Certainly, everyone who has used video capture programs that save frames to bitmaps not so long ago has found out.

Video formats supported by browsers

MP4 – my choice

An MP4 format is actually a group of audio and video encoding standards. MP4 is also the successor to MPEG encoding. It is now a widely supported format that allows achieving satisfactory picture and sound quality, and the codec settings allow very economical recording. The MP4 container format with H.264 video codec and AAC audio codec is natively supported by many browsers including Internet Explorer, Safari, and Chrome. Internet Explorer and Chrome also support the MP3 audio codec in an MP4 container, but Safari does not. Firefox supports the format in some cases, but only if a third-party decoder is available and the device hardware can support the profile used to encode MP4.

The MPEG media formats are covered by patents that are not freely licensed. Some necessary licenses can be purchased from MPEG LA. H.264 is currently not a royalty-free format, not suitable for an open web platform, according to Mozilla, Google, and Opera. However, free formats are not supported by Internet Explorer and Safari, so Mozilla decided to support this format anyway to make it easier for developers to decide on the format used.

Advantages of the MP4 format

  • high compression efficiency,
  • currently wide support and the ability to play the downloaded file on many devices,
  • good quality/compression ratio.

MIME types for MP4 files

  • video / mp4 – a multimedia file of an MP4 container containing video (and possibly also audio),
  • audio / mp4 – A WebM media file containing audio-only.

Writing in this format is possible in most video editing programs. In the absence of such a possibility, you can always use numerous converters, even those available online.

WebM

The WebM format is based on a limited version of the Matroska container format. It always uses the VP8 or VP9 video codec and the Vorbis or Opus audio codec.

The WebM format is an open standard format that Google develops (as is the case with WebP photos). At this point, the topic of selecting the appropriate format for websites could be finished and the other advantages of the Matroska codec and the WebM format are:

  • fast scrolling to the indicated moment,
  • high capacity to recover damaged data,
  • very good quality/compression ratio.

MIME types for WebM files:

  • video / WebM – a WebM multimedia file containing video (and possibly also audio),
  • audio / WebM – a WebM multimedia file containing audio-only.

Ogg Theora Vorbis

The Ogg container format with Theora video codec and Vorbis audio codec is supported in the browsers: Firefox, Chrome, and Opera, and support for this format can be added to Safari (but unfortunately not on iOS) by installing an add-on. The format is not supported in any way in Internet Explorer.

The disadvantage of the Ogg Theora Vorbis format is, unfortunately, a worse compression-quality ratio and less compatibility – it is not as widely supported as MP4 and WebM. A very big advantage of the Ogg format is that it can, however, be used to support older versions of browsers.

MIME types for Ogg files :

  • audio / ogg – and Ogg file containing audio-only,
  • video / ogg – an ogg file containing video (and possibly also audio),
  • application / ogg – Ogg file with undefined content. It is preferable to use one of the other two MIME types, but you can use it if you don’t know what the contents of the file are.

Size / Resolution

As with photos, the size of a video image significantly affects the perceived quality of the image and its file size. Theoretically, it can be any, but both in the audio/video technology and in the case of websites, after the 16: 9 ratio has become popular, four common resolutions are known:

  • 1080p (1920 × 1080, usually FullHD) – in this resolution you should publish materials for Desktop devices that have many important details, such as text, presentations, and screen recording.
  • 720p (1280 × 720, HD or HD Ready) – in this resolution you should publish movies for desktop and mobile screens, where the level of detail is not so important.
  • 480p (720 × 480 – DVD) – at this resolution you can easily publish materials that do not contain text or details that are crucial to see clearly.
  • 360p (480 × 360) – format intended for mobile devices.
  • 240p (352 × 240) – a format intended for mobile devices, where saving transfer is key.

Bitrate

Another topic that you need to understand when publishing your own video on a website is bitrate. In terms of functionality, bitrate resembles the “compression rate” or quality that is set when converting graphics to individual graphic formats.

In the case of video (as well as audio), the final file size is so important that the person who deals with the compression is allowed to determine what size should be, on average, a single second of the movie. Thanks to this, you can determine the quality of the video somewhat from the back, because you know in advance what the file size of a given length will be, but we do not know how clear the image will be.

The higher the bitrate, the larger the file size and the chance that the output will be of high quality. At the same time, too high a bitrate increases the risk that we will simply waste unnecessary space and the quality improvement will not have a significant impact on the subjective experience of the person watching the video.

The lower the bitrate, the smaller the file size and the risk that the output material will be too low-sharp and detailed. At the same time, we increase the chance that we will save a lot of space while maintaining a fairly good viewing experience.

We also have the option of VBR use. In this option, the instantaneous bitrate is matched to the complexity of the animation. This allows you to save the recording size in the breaks of simple compositions, e.g. captions on a black background or a still image, to use the saved bits to record more complex and more dynamic animations.

Frames per second

The number of frames per second determines the impression of smooth animation of the image in the video. Taking advantage of the fact that many monitors and televisions are still operating at 30k / s, most video (which can be found on the Internet) is typically frame rate of around 29.97 frames per second. For some time YouTube and P *** hub have decided to support 60fps refresh – this is a lot and there is no point in screwing this result if the video is intended to be viewed at standard speed.

As a curiosity, I would like to remind you that many monitors and almost all TVs have their own mechanism that allows (at the expense of the so-called input-lag) to increase the frames (somehow adding additional ones), thanks to which the viewed video seems smoother.

Video storage on the server

The topic of video optimization for web pages is very similar to what we are talking about for photos and graphics. However, movies have several characteristics that force us to consider a few additional problems.

File server

The first will be their size. The gradual addition of more clips causes a significant increase in all the data we need to maintain. For this reason, it is worth considering at some point transferring resources to the cloud, e.g. Amazon S3 services.

CDN

In the event of the growing popularity of our site, we can easily connect our bucket to the CDN, which will reduce the cost or save transfer limits. CDN also causes the content to be retrieved faster using the nodes closest to the user. Changing the hosting of the website or application itself does not affect our collection of clips. 

Cache

Considering the size of the videos and the fact that they are often used on the home page, be aware of the cache. By adding the code to .htaccess:

SEO optimization of videos

Movies and videos can also be optimized for SEO purposes. We can use:

  • semantic filenames – which can make our clip appear more often in the movie search engine and in the main Google search engine.
  • title attribute – we can use it just like alt tags for images (note: using alt tags for a video element is wrong)
  • minimizing the size – good movie parameters can contribute to the fact that our movie will be returned faster in the search results and the pages containing them will be positioned higher,
  • cover file name – i.e. poster,
  • the content inside the tag – The content inside the <video> </video> tag has the same function as the alt next to the image. According to graceful degradation, the text will appear if for some reason the movie cannot be played.
  • sitemap.xml sitemap – video material is the case where the use of sitemaps for SEO purposes is appropriate,
  • movie file metadata – movie files have their own metadata, just like any other file,
  • use of subtitles,
  • transcription of all content in text form,
  • use of lazy-load techniques – preventing too early downloading of videos and covers. Read more about the lazy-load method.

The most common problems with videos on the site

Attaching videos to a page can also cause problems. In this section, I suggest how to solve them.

Video sizes mismatched – iframe responsiveness

In fact, an iframe can cause problems with response pages. It’s hard to control width-to-height ratios when extending the iframe across its entire width.

The solution may be to surround the iframe with a separate div element:

And in CSS style, we add rules:

Summary

If we embed a video that we previously published on YouTube or Vimeo using the iframe function, most of the issues covered in this article do not apply to us at all.

On the other hand, isn’t it worth the effort to publish your own video on your own website and domain? Isn’t it better to publish a video under your own URL, which will increase the authority and value of our website in the eyes of search engines? There is no clear answer to this question, so I leave you reflection as usual.