Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 399
mmmoustache Avatar asked May 07 '14 16:05

mmmoustache


People also ask

How do I embed a Vimeo video without iFrame?

Simply put, if you want to embed Vimeo without iFrame, you will first need to click on the share button of the video. From there, a window will pop up, and you can click on the Show options button to use the old embed code choice to proceed with the project.

How do I embed a Vimeo video in HTML?

3 Steps To Embed a Vimeo VideoStep 1: Click on the share button that sits under the video. Step 2: Copy the Embed code. Step 3: Paste the Embed code into your website.

What HTML5 element can you use to embed video in a webpage?

The HTML <video> element is used to embed video in web documents. It may contain one or more video sources, represented using the src attribute or the source element. The <video> element is supported by all modern browsers. However, not all browsers support the same video file format.

How do I embed a Vimeo video without the controls?

When logged into Vimeo, go to Settings, click on the Embed tab, and select Always Hide on the Player Preferences. This will prevent any controls from showing on top of the video. You can remove everything except a small rollover play button.


1 Answers

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>
like image 199
Manish Patolia Avatar answered Sep 30 '22 15:09

Manish Patolia