I'm trying to embed a Vimeo video into a webpage, using the HTML5 video element, despite Vimeo's embed code using an iframe. I want to use the video element so that I can create a fully responsive webpage including videos, but I'm having trouble without using HTML5. I've tried a couple of tools, most successfully using fitvidsjs, but the responsiveness isn't 100% (black bars etc..).

Is it at all possible to use the HTML5 video element with a Vimeo video (i.e. without an iframe)? Could the Vimeo API help me achieve this?

I'm trying to embed a Vimeo video into a webpage, using the HTML5 video element, despite Vimeo's embed code using an iframe. I want to use the video element so that I can create a fully responsive webpage including videos, but I'm having trouble without using HTML5. I've tried a couple of tools, most successfully using fitvidsjs, but the responsiveness isn't 100% (black bars etc..).

Is it at all possible to use the HTML5 video element with a Vimeo video (i.e. without an iframe)? Could the Vimeo API help me achieve this?

• javascript
• html
• vimeo

3 Answers 3

You can use below code for display in html 5

<object width="640" height="360">
    <param name="movie" value="http://player.vimeo./external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4"/>
    <param name="allowFullScreen" value="true"/>
    <param name="allowscriptaccess" value="always"/>
    <embed width="640" height="360" src="http://player.vimeo./external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>

As of 8/23/2024 Vimeo allows this and it is still possible. The original answer needed some slight tweaking to be relevant for today.

The URL structure for the Vimeo videos used in the original solution above has been depreciated and Vimeo has actually simplified this by allowing their standard embeddable URLs to be used.

The updated code below has had aria-labeling added for ADA pliance support, and fallback content has been added. Fullscreen support appears to be limited due to Vimeo having restrictions enabled.

Here's the updated code:

<object width="640" height="360" aria-label="Vimeo video player: Descriptive title of the video" data="https://player.vimeo./video/361335184?h=bafaad0e98&color=ec2024&title=0&byline=0&portrait=0">
    <param name="movie" value="https://player.vimeo./video/361335184?h=bafaad0e98&color=ec2024&title=0&byline=0&portrait=0" />
    <param name="allowFullScreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <embed width="640" height="360" src="https://player.vimeo./video/361335184?h=bafaad0e98&color=ec2024&title=0&byline=0&portrait=0" class="youtube-player" allowscriptaccess="always" allowfullscreen="true" aria-label="Embedded Vimeo video: Descriptive title of the video"></embed>
    <p>Your browser does not support embedded videos. Here is a <a href="http://player.vimeo./external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4">link to the video</a> instead.</p> 
</object>

Vimeo actively prevents this. It's technically impossible.