How to Embed Vimeo Videos on Your Website

Vimeo is a great video sharing website where you can publish and share your personal or business related videos, as well as host and embed them on your website. In this tutorial, I will demonstrate how to embed a Vimeo video on a website.

Vimeo is one of the most popular video sharing websites, which is also a nice alternative to YouTube, where you can watch videos, listen to music for free, or find interesting content when you are bored. Just like you can view other publishers' videos on Vimeo, you can also publish and share your own videos.

If you are planning to put some videos on your website or blog, hosting them on a high quality video sharing website such as YouTube or Vimeo will be a good idea. A video sharing website not only hosts your videos for you for free (often times) and saves you a lot of bandwidth and hosting server resources, but it also provides your videos with a platform where they can be easily viewed and shared by anyone in the world. From the viewability perspective, compared to hosting them on your website, putting videos on established video sharing sites like Vimeo has a higher chance for displaying properly on various types and sizes of screens from desktop computers to laptops, and from smartphones to tablets and smart TVs.

Vimeo, as a video hosting and sharing website will not work identical to file storage sites, but it will still be a nice home for your online videos to start with. Especially, if your web hosting plan is rather limited, putting high-resource files such as videos on a third party site makes perfect sense.

TIP: You can also check the following tutorials to learn more about embedding third party content on your websites:

How to Embed YouTube Videos
How to Embed SoundCloud Music Tracks
How to Embed Google Maps
How to Embed Instagram Photos

You can embed not only your own videos that you published on Vimeo, but also videos of other publishers and channels, provided that they have given permission to their videos for being embedded. Now, let's continue with the steps for embedding a Vimeo video on a website.

How to Embed a Vimeo Video on Your Website

Whether you are using an online website builder, a WYSIWYG web design software or a simple text editor such as Notepad, there are basically two things you need to do for embedding the Vimeo video on your site. The first one is to grab the embed code of the video, and the second one is to insert it into the right place on your site files.

STEP 1: Go to vimeo.com and find and open the video that you want to embed.

TIP: You don't need to be logged into your Vimeo account in order to get the embed code.

For the sake of demonstration purposes, I will be using the following video on Vimeo, which I liked a lot:

https://vimeo.com/132471949

STEP 2: On the video page, you will see the video display area. Click the Share button, which is a paper plane icon on the top right corner of the video. You can also use the other Share button which is located below the video title to the right of the video stats section.

How to Embed Vimeo Videos on Your Website - 1

This will open the Share this video popup window, which offers multiple options for sharing the video, including the direct video link, social buttons, send email and the Embed section at the bottom.

How to Embed Vimeo Videos on Your Website - 2

You can either directly grab the embed code from the textarea or click Show options link to see more embed options to customize how the video will look on your site.

How to Embed Vimeo Videos on Your Website - 3

STEP 3: Adjust the embed options as you wish. Some of the things that you can do are, changing the size (width and height in pixels) of the video, displaying the publisher icon, name and video title, text color, autoplay, loop, text link and video description below the video. You may also notice how the embed code changes in real time as you play with the options.

STEP 4: Once you are done with adjusting the video embed options, click on the embed code textarea field, select whole code and copy it (Ctrl + A > Ctrl + C).

The video embed code of a Vimeo video will look like the following:

<iframe src="https://player.vimeo.com/video/132471949" width="640" height="360" frameborder="0" allowfullscreen></iframe>

STEP 5: Open the file or page on your website where you want to insert the video and then paste (Ctrl + V) the video embed code. If you are using a text editor, you may find our tutorial about editing HTML files to be useful. If you know how to apply CSS styles, you may also add some inline styles to ensure the iframe will fit nicely on your page.

The resulting video embed will be like the following:

This ends our tutorial about Vimeo video embeds. Note that we used responsive styles for the above video to make it nicely fit on all screen sizes. If you want your video to fit nicely on your page on any screen size, you should also use responsive video styles.

Also Check:
What to Watch on YouTube?
Download Free Music Legally
Fullscreen Background Video
Div with Background Video

One thing to keep in mind when using one or more videos on your website is that depending on your visitor's internet connection speed, the overall loading speed of your website may reduce considerably. Therefore, make use of videos on your sites only where it is necessary and it makes the most sense.

Was this post helpful?

If you found this post to be helpful, please share it! Thank you :)

f t g+ in