iFrames Part 3 – Vimeo


This entry is part 4 of 4 in the series iFrame

Let’s see if we can show our Vimeo-hosted video in this website.

  1. Log in to your Vimeo account (create a free account if you don’t have one yet)
  2. Vimeo gives you a free “set-up” video which is a dancing bear. Click on that.
  3. A the top right, click on the blue Embed button
  4. Customize the Settings
  5. At the bottom right, click on the Copy embed code blue button, which copies the code to the clipboard
  6. Past that copied embed code into your website. (I copied it here)

Note that if the link privacy is set to private, nobody will be able to see your video. At the top of the video page there might be a Private button. Click on that. Scroll down a bit and find the Public button. Click that to make it public so that everyone can view the video.

We can’t simply paste a link into iFrame and expect the video to play. Here’s what happens when all I do is copy the link and put it into an iFrame tag. This doesn’t work.

<iframe src="https://vimeo.com/916812706"></iframe> 

When I actually copy the code to enbed the video into this website it works.

There are a lot of parts to this embed code, as you can see below.

<div style="padding:75% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/916812706?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Set up your first video"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

Below, I’ve changed the code to only be 65% for width and height (instead of 100% for each).

Series Navigation<< iFrames Part 2

Leave a Reply