CODEWITHSUNDEEP
javascripthtmlvimeo
mmmoustache
mmmoustache

Reputation: 2323

Embed Vimeo video with the HTML5 video element and without iframe

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?

Upvotes: 10

Views: 12221

Answers (3)

TheRealJonnyB
TheRealJonnyB

Reputation: 11

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 compliance 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.com/video/361335184?h=bafaad0e98&color=ec2024&title=0&byline=0&portrait=0">
    <param name="movie" value="https://player.vimeo.com/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.com/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.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4">link to the video</a> instead.</p> 
</object>

Upvotes: 1

Xaver Fleer
Xaver Fleer

Reputation: 475

Vimeo actively prevents this. It's technically impossible.

Upvotes: 0

Manish Patolia
Manish Patolia

Reputation: 517

You can use below code for display in html 5

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

Upvotes: 9

Related Questions