How to insert videos on the website

Videos on websites

Videos are the graphic elements that most involve users and for this reason you choose to insert them within the pages of your website. Being images in motion, they certainly capture the attention of users more than the classic static image.

That said, videos carry more weight and if you don’t pay the right attention, they could lead to a slowdown in the loading of your website pages.

For this reason, I recommend that you proceed with two solutions.

  1. Looped video of a few moments.
    This first solution is recommended if, for example, you want to insert a video in the header of the homepage. The video must be short and have a duration of a few seconds. This way you do not run the risk of slowing down the loading of the site.
  2. Insert the video frame, importing it from YouTube.
    In this second solution it is proposed to copy the frame of the video present on YouTube and to proceed with the implementation of the video within the desired page.
    This second solution is not always recommended: for example, if you decide to insert the YouTube frame in the header of a web page, you need to be aware of the problems that the site could encounter.
    – First of all, there may be slowdowns in loading the page, especially if it is long videos.
    – The preview of the video may not be as clear as it was previously: this happens because the dimensions of the header images are certainly larger than those of the YouTube video.
    – When it finishes playing, the video will automatically stop and the static preview image of the video will be displayed.

How to insert the frame from YouTube

  • search for the video you want to implement on the platform;
  • click on “share” under the YouTube video;
  • click on “embed”;
  • copy the frame generated by YouTube.

Below is an example of a frame:
<iframe width=”560″ height=”315″ src=”” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>