How do I embed a Vimeo video without the Vimeo player?
Asked Answered
D

1

8

I couldn't find a proper explaination, tutorial or thread online explaining the following: I "simply" want to load a Vimeo Video (where I have a pro-Account) without controls (play, pause, timeline, whatsoever) just the pure video (also without the black bar top and bottom) and stream it within a div I created. I want the video to be always fully filling this div.

How can I use the Vimeo-API to do that? I found examples of the Vimeo-API but nowhere I could find anything regarding loading the plain video file.

Disqualify answered 30/3, 2016 at 7:30 Comment(4)
What exactly are you stuck with? When I Google vimeo embed without controls there seem to be plenty of instructions on how to remove the controls. Are they not working? Which approach did you use?Scarper
Well, I can't find a single ressource on how to load the video-file via pure javascript into a container. It always has to be done with embed code or something. I want to load the plain video file.Disqualify
A div can't play a video - you'll always need some kind of element that can. This looks like what you want: https://mcmap.net/q/1133123/-vimeo-video-not-working-with-html5-tagScarper
I made a suggestion to edit the titleScarper
S
17

According to this answer, your Vimeo videos should have a "play in external player" link (Pro account required):

Go to your Video Settings and Video File, at the bottom there is a section called Use Your Own Player, you'll find there direct urls to your video.

You can embed that direct URL in a player of your choice - e.g. a <video> element:

<video src="http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4"></video>

You can create that <video> element using JavaScript, as well.

A plain <div> element can not dispplay video without some element to aid it.

Scarper answered 30/3, 2016 at 8:0 Comment(1)
These urls are also accessible via the Vimeo API inside the body of any request made to a video endpoint you own (such as api.vimeo.com/me/videos)Figure

© 2022 - 2024 — McMap. All rights reserved.