33

How to play vimeo videos on HTML5 player?

Step 1:

<video width="320" height="240" controls>
  <source src="http://player.vimeo.com/video/3873878">
</video>

Step 2:

<video src="http://player.vimeo.com/video/3873878" width="320" height="240" controls></video>
Suresh Palanisamy
  • 521
  • 1
  • 5
  • 13
  • 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. Example: – Viru May 22 '17 at 08:33

4 Answers4

44

This Vimeo doc might help. This is working for us:

  1. You need a Vimeo Pro account.

  2. Get the video link from the Distribution tab when looking at the video settings in Vimeo: enter image description here

  3. Add the video link to your HTML5 video tag:

<video width="320" height="240" controls> <source type="video/mp4" src="https://player.vimeo.com/external/*.hd.mp4?s=*&profile_id=*"> </video>

Peter Rhodes
  • 698
  • 6
  • 14
  • 1
    This is a much more helpful answer – Chuck Le Butt Dec 03 '18 at 20:20
  • We have the same requirement. But we're using iFrame in a "cover" container in a visually rich website. We'd like the video to play `automute` and `inlineview`. Basically behind a semi-opaque layer. But in mobile this doesn't work. The advantage of the `video` tag is that it allows a `poster` attribute, which allows us to specify an image. So on mobile where the video cannot autoplay, the poster image shows and all's well. Any idea how we can make the iframe have a "poster" type image? – Khom Nazid Jun 16 '19 at 02:07
20

You will need to use our standard embed code unless you're a PRO member. Our embeds default to HTML5 and use it wherever possible.

<iframe src="https://player.vimeo.com/video/3873878" width="320" height="240" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

See our FAQ for info: https://vimeo.com/s/tdf, https://vimeo.com/s/adg

Brad Dougherty
  • 908
  • 4
  • 14
  • 3
    **Brad Dougherty** I don't want to use iframe tag. In video tag itself i want to play the videos – Suresh Palanisamy Mar 15 '17 at 10:32
  • 2
    You will need to have a PRO account to use third-party player links if you want to do that: https://help.vimeo.com/hc/en-us/articles/224823567-Third-party-players-links – Brad Dougherty Mar 16 '17 at 15:29
  • 2
    Is native html5 player third party ? I am just wondering why is it not supported ? – Sahib Khan Feb 12 '18 at 14:08
  • 2
    @SahibKhan it is supported, but you have to pay for it. That's how Vimeo makes money. – Vinicius Rocha Apr 22 '18 at 01:32
  • 1
    ` – pd_au Oct 22 '18 at 03:44
1
<iframe  class="b-hero_image lazy"
         data-src="https://player.vimeo.com/video/1111111?autoplay=1&loop=1&autopause=0&api=1&controls=0&muted=1?playsinline=0"
         width="640" 
         height="300" 
         frameborder="0" 
         allow="autoplay; 
         fullscreen" 
         allowfullscreen 
         muted 
         playsinline>
</iframe>
AGrush
  • 1,107
  • 13
  • 32
1

Use these settings

<iframe src="https://player.vimeo.com/video/3873878" width="320" height="240" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Arun A S
  • 6,421
  • 4
  • 29
  • 43