Add Responsive YouTube and Vimeo Videos to Any Website

19 Mar 2022

This time we want to start our helpful blog with the stats from the official Statista website:

  • more than 500 hours of video were uploaded to YouTube every minute
  • YouTube has grown from a repository of amateur videos into the most extensive online video platform worldwide
  • In the United States, YouTube saw a reach of around 74 percent in 2020
  • More than 1.58 million subscribers joined Vimeo's SaaS video tools in 2021

The data above shows that people are still interested in videos in 2022. Add responsive YouTube and Vimeo videos to any website to attract users' attention increase website traffic and positions in search engines.
But! You need to set everything right to benefit from embedding responsive Vimeo and Youtube videos fully. Make sure that all visitors can conveniently view the embedded video on your site regardless of the type of device and extensions.
Below, a team of our web experts will try to explain as much as possible how this is done. Stay with us; that'll be interesting.

Responsive Youtube and Vimeo Videos Embed on your website

To begin with, let's figure out why you need a video on your site at all. Now with the development of technology, many people prefer to watch and listen rather than read. In addition, there is a group of people with disabilities for whom video or audio is the only comfortable way to receive information. Adding videos to your site with YouTube or Vimeo will definitely play into your hands. Because video is just another marketing tool to drive traffic, leads, and revenue for your business, no matter what you do.

  • 87% of marketers say video has helped them increase traffic in 2022, and this number is only growing every year.
  • 81% of marketers say video has helped them directly increase sales.
  • 93% of businesses say video has helped them increase brand awareness.

The facts spoke for themselves. Adaptive video embedding is taking place in today's world.

Why should you embed responsive Youtube or Vimeo videos on your website?

There are two options for posting videos on the site.
Option #1You give a link to the video and everyone who wants to watch it is redirected to another site where this video is posted.
Option #2You embed a video on the website and everyone who wants to watch it presses play and enjoys watching it on your site.

Top Reasons Your Business Should Have Video On Your Website

  1. keep users on your page
  2. improve SEO position in Google
  3. increase the chances of getting into the video results tab
  4. improve your website traffic
  5. reach a wider audience and prospective customers
  6. boost average time spent on your website
  7. keep your audience interested

How To Embed YouTube and Vimeo videos on a website?

The opportunity to add YouTube and Vimeo video players to the site makes life much easier. However, there is one caveat: they don't provide responsive videos by default. Therefore, we offer you our tutorial on embedding YouTube and Vimeo responsive video using CSS. If you still have questions or can't do it yourself, then visit our Drupal services page and find answers to your questions.

5 simple steps to make Youtube videos responsive

  1. Open YouTube. Find the video you want. Click the Share button. Next, a new window will appear. Сlick the Embed button.
  2. Right-click and copy the HTML snippet.
  3. Then go to your site and paste this HTML snippet. Before embedding a video on the website, you can enable the embed options. For example, you can start a video at a precise time, turn on privacy-enhanced mode, and show player controls.
  4. Add a div tag before and after the embed code.
  5. And the final step. Add CSS properties to one of the files. 
    .video-responsive{
  overflow: hidden;
  padding-bottom: 70%;
  position: relative;
  height:1px;
}
.video-responsive iframe{
  left: 1;
  top: 1;
  height: 80%;
  width: 80%;
  position: absolute;
}

That's it, your video will now be responsive. The same steps can be followed for all video services using the iframe tag.

Guide on how to embed a Vimeo video

  1. Go to Vimeo. Find the video you like and want to add. Click the Share button.
  2. A new window will open. There you find the embed code.
  3. To view the available advanced embed options, click the Show Options button.
  4. Then go to your site and paste this embed code. Congratulation, you did it!

3 Easy Video Embedding Tips

Our Drupal development agency has a lot of experience, so it's not a problem for us to make YouTube videos responsive. We want to share with you some of the best video embedding practices.

  1. 1. Place the video in the right place on the site
    When adding a video, consider where it would be best to place it on the site. For example, if you want to capture visitors' attention, then place a video at the top of your site.
    If your goal is to confirm the words or back them up with evidence or provide more detailed information, then we recommend posting a video inside the blog or at the end.
  2. Prefer short and informative videos
    The longer the video, the more likely user engagement will drop. Therefore, it is recommended to use 2-3 minute videos. Although, for example, if this is a guide, then it can be longer. It all depends on the type of video and the information it contains.
  3. Get professional help if you feel it's all too complicated
    Call specialist if embedding videos from YouTube or Vimeo does not work. It's better to take help than to add videos that don't play or don't respond.

To sum up

It seems we have shared with you all the useful information about adding YouTube and Vimeo responsive videos. Use videos on your site because all the evidence points to their positive impact on SEO, revenue, and your site's attractiveness.
Check out our video embedding tips to avoid the most common mistakes. Our third-party integration service is at your service
You can ask questions, make suggestions, or share ideas for embedding Youtube and Vimeo responsive videos in the comments below.

Comments

An
Anonymous