How to embed a video from VK on a website

VKontakte contains a large number of videos that can be added to your site. In this article, we will consider several ways to insert a video from VKontakte to a site page.

Insert using code

Go to the video page on VKontakte

Click the "More" link below the player and select "Export"

In the window that appears, copy the code with the <iframe> tag. If necessary, you can select the video size (one of the options, or specify custom parameters) and enable autoplay (by default it is disabled, playback starts when you click on the window).

Then paste the code inside the html document in the desired location.

After this, the video will appear on the page.

If the default settings are not enough, you can do it manually.

Let's look at some attributes that can be added inside the iframe tag:

• frameborder – Sets whether to display a border around the player or not.
• allow with value:
  • autoplay – Allows you to automatically play video and audio files
  • fullscreen – Allows embedded content to open in full screen mode.
• marginheight – the top and bottom margins from the content to the frame border.
• marginwidth – left and right margins from the content to the frame border.
• hspace – horizontal indentation from the frame to the surrounding content
• vspace – vertical indentation from the frame to the surrounding content.

To change the appearance of the player, specify the style attribute and list the styles as a key: value pair. For example, let's add a frame to our video, change the color, round the edges, and set a shadow. The finished code looks like this:

And here is the result:

Insert into CMS

If the site is running on a content management system (CMS), then standard tools will work for a regular insert. For example, WordPress has the ability to use the "Custom HTML" block.

To do this, find the video you need and copy the code with the <iframe> tag, as in the instructions above.

After that, return to WordPress and open the post editing page.

To add a new block, click the "+" button in the upper left corner.

A menu for selecting a block will open. In the search bar, enter "Custom HTML" and select the appropriate block.

Paste the copied frame code into the "Write HTML..." field.

Publish the recording, after which the video will appear on the site.

In addition to the standard tools, WordPress has a library of plugins, including some for working with video. They offer the following ways to add: upload from a computer, via a direct link or via a shortcode.

Here are a few of them:

• Easy Video Player,
• Videojs HTML5 Player,
• Ultimate Video Player,
• HTML5 Video Player.

These methods allow you to embed a video from VK on your site. But it is worth considering that when using them, you may need to manually edit the code and refresh the page. But if you need a solution where changes are applied automatically, then the Qform video widget will do. With it, you can add a video to the page in just a couple of clicks, select one of the display types and configure the launch parameters.