Website Video That Generates Leads

First, let us consider why a website needs video content in the first place. As technology develops, many people prefer watching and listening rather than reading. You can record video messages for website visitors, describe and demonstrate your products, create video tutorials or various demonstrations, and publish videos related to the subject of your website.

High-quality video marketing — is not simply a video about a business. It is a comprehensive strategy that addresses the following objectives: 

1. Product demonstration and the creation of a visual storefront with a «live» description.
2. Increasing customer loyalty by creating a sense of familiarity — company representatives whom users recognize from videos seem «familiar» rather than faceless strangers.
3. Introducing the audience to the production process — the product becomes familiar and understandable rather than a «pig in a poke».
4. Video tutorials draw attention not only to a product but also to its manufacturer: people are more likely to contact a company that has provided them with useful information than an unfamiliar seller.
5. Creating a positive company image by showcasing its strengths (promotional company videos allow you to present the business in a favorable light «in action» — this inspires more trust than a text with similar content).
6. Informative promotional videos are popular even among people who are not planning to buy anything (but they will appreciate the brand for its interesting content and remember it in a positive way).

Today, users want not only to read texts but also to see various graphical elements, use interactive features, and watch videos directly on a website. In many cases, this provides additional convenience for users (for example, when they can watch a video tutorial) or simply makes their time on the website more engaging.

Video content is the future. It is an effective way to promote products and services, as well as a powerful source of website traffic. Use all the advantages of the video format to expand your audience, increase customer trust, and boost sales.

Whether it is a useful video lesson or tutorial, a product demonstration video, or an entertaining video designed to make a user's experience more enjoyable, sooner or later it becomes necessary to embed the video into a web page.  

We will personally customize the video widget for your CMS for free

Tilda, WordPress, Bitrix, and others.

Submit a request

There are several ways to do this. Today, we will examine 4 different methods that will help you complete this task.

The first method that we will examine is embedding a video from a video hosting platform (RuTube, Vimeo).

RuTube is useful when you need to publish a long video. Its disadvantages include poor video quality after uploading, an unattractive player, and advertisements before the video.
Vimeo is not widely used in Russia, but the service is very convenient and easy to use. It does not display advertisements and pays close attention to security. However, there are disadvantages as well, including one particularly important drawback – uploading a video is very slow and takes place in two stages. Each stage can take up to 3 hours.

The second method – is embedding a video using a player script. First, download the player files and place them in the same folder as the video files. Then, connect the player script and add the embedding code to the website. The disadvantage of this method is that it consumes hosting space because the entire file must be uploaded. It can also place a heavy load on the server when many visitors watch the video at the same time.

The third method – is embedding a video using HTML code. Video content can be added to web pages using the «video» element. The video file must be stored on your server, and the path to it must be specified in the HTML document. The disadvantage of this method is that the code may not work correctly on some older devices. To solve this problem, the file must be converted and the code must be modified. Another issue concerns older browsers that do not understand HTML5 tags. If a browser does not recognize a tag, it simply ignores it, but it does not ignore the content inside the unknown element.

The fourth method – is using third-party services. QForm allows you to add videos using a video widget. Simply configure the desired settings for the file (display style, start time, analytics systems, and CTA button). An embed code will then be generated, which must be placed in the body of the page. 

Let us examine each method in more detail.

Embedding a Video from a Video Hosting Platform

After uploading your video to a video hosting platform, you can obtain the HTML code required to embed the video on your website. For example, obtaining the HTML code for a video on the RuTube hosting platform looks approximately like this:

 

 

Embedding a Video Using a Player

There are currently many free players that allow you to embed videos on a website. Let us use Flowplayer. It is a free web video player designed specifically for website owners.

First, connect the script in the head.

<script type="text/javascript" src="flowplay/flowplayer-3.2.2.min.js"></script>copy

Now, go to the body of the file and add the player itself with the file to be played. We will place it directly below the corresponding heading, inside a div tag aligned to the center.

<div align="center"> 
<a href="video/mult.mp4" style="display: block; width: 560px; height: 315px;" id="player"></a> 
<script type="text/javascript"> 
flowplayer("player", "http://your-site/path/to/file/flowplay/flowplayer-3.2.2.swf", 

{ 
clip: { 
autoPlay: false, 
autoBuffering: true 
} 
}); 

 </script>  
 </div>copy

The settings specified here prevent the video from starting automatically but allow it to load. To start the video automatically, remove the comma after the path to the «flowplayer-3.2.2.swf» file, add a closing parenthesis and a «;» (without quotation marks), and delete everything that follows up to the closing «/script» tag.

Embedding a Video in HTML5

For this purpose, use the video tag, which allows you to provide videos in several formats in case the primary format is not supported by the user's browser.

<video width="400" height="300" controls="controls"> 
<source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'> 
<source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
<source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'> 
/*The video tag is not supported by your browser. */ 
<a href="video/duel.mp4">Download the video</a>. 
</video>copy

In the video tag, the controls attribute is responsible for displaying the video player controls. 
The width and height attributes set the width and height of the video playback area, respectively.

In the source tag, the src attribute specifies the path to the file to be played.
Each source element has a type attribute, which defines the MIME type of the embedded file and its codecs to ensure that the video can be played in all browsers. 
Let us examine the specified formats:

• ogg (.ogv, .ogx) – works in Firefox, Chrome, and Opera. MIME type: video/og;
• webm – works in Firefox, Chrome, Opera, and Adobe Flash Player;
• MIME type: video/webm;
• mpreg4 (mp4) – works in Safari and Chrome. MIME type: video/mp4.
  We also inserted a link that allows users to download the video file if it is not supported by the browser. The path to the file is specified in the href attribute of the <a> tag.

Using the QForm Video Widget

To use the video widget, you must first add a website to the service.

1. Drag the file into the upload field or click the field to open the file selection window on your computer. Currently, only MP4 videos with a maximum duration of 1 minute are supported.
2. Enter a video name, which will appear in the list of created widgets.
3. The widget description is optional and can be useful if several videos have similar names and you need to distinguish between them.
4. Select one of the widget display styles for the website:
   • Displaying the widget in the body of the page allows you to place the video anywhere on the website page in a vertical or horizontal orientation. This can be used to promote a product by embedding a video in the middle of its description.
   • A vertical or circular thumbnail. This format can be used for employee videos about the company or customer video testimonials.

Next, configure the video launch parameters if necessary, add a CTA button and define its activation conditions, and enable goals for analytics systems.

After configuring all the settings, click the «Save» button.

The created widget will appear in the list. Click the «Widget Code» button, copy the generated code, and insert it into the website inside the <body>.

As a result, the video will be displayed on the website according to the selected display style.

In the Body of the Page

As a Thumbnail

Important: a video does not generate leads by itself.
Leads appear when the video leads users to an action — a button, a form, an appointment booking, or a shopping cart.

What QFORM adds to a regular video:

• CTA buttons and forms directly inside the player
• scenarios and branches based on timestamps
• a short path: video → action
• click and completion-rate analytics
• data transfer to CRM and GA4

Website Video — What Is the Difference Between «Showing» and «Generating a Lead»?