17

I'm trying to embed a Vimeo video and force it to use HTML5 by default.

Here's a thread about doing the same thing I'm tying to do but with YouTube.

Here's another thread talking about getting the Vimeo HTML5 cookie

Here's a discussion of the issue on Vimeo's site. Basically, I would be doing it in response to a user's preference on my site so their concerns don't really apply.

Does anyone know a workaround or way to force HTML5 Vimeo embeds even when Flash is available? (I know the cookie should work in Safari but I have many Chrome users.)

Thanks.

Community
  • 1
  • 1
Nick
  • 3,172
  • 3
  • 37
  • 49
  • Vimeo has changed their embedding code to default to HTML5 whenever I test it. It still falls back to Flash in Firefox but Safari and Chrome get HTML5 as it should be. No hacks needed anymore! – Nick Apr 07 '15 at 16:42

2 Answers2

5

Currently there is no way to force HTML5 with the embed script. The "universal player" automatically chooses the format based on the device.

The old embed provides a way to force Flash, but that's the only other option.

Let's hope for the option in the future.

miketucker
  • 1,074
  • 1
  • 15
  • 27
  • Vimeo seems to have recently changed their embedding code to default to HTML5 whenever I test it. It still falls back to Flash in Firefox but Safari and Chrome get HTML5 as it should be. So no hacks needed anymore! – Nick Oct 12 '13 at 22:23
2

On a browser with flash the player loads in html5 mode with the following code. The sandbox prevents the iframe from accessing any plugins including flash. 

<iframe sandbox="allow-same-origin allow-scripts allow-popups"
  id="foo" width="100%" height="90%"
  allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" 
  src="http://player.vimeo.com/video/28544156?api=1">
</iframe>

To allow the vimeo button to open the vimeo web page for the video you need the 'allow-popups' permission. It's not needed to play the video.

Edit: adding complete example

If you had just a black view it's possible that the video had a size of zero because I had the iframe set to fill parent with width 100%, but if the parent was shrink to fit then that size would still be zero. Here is a whole web page with the CSS to make the video fill up most of the page. Additionally the -webkit-transform will mirror image the video, and then rotate it slightly. If it was displaying in flash this would produce a black screen as it can't handle rotations at all. I have since found out that this probably won't work on firefox at all because it doesn't natively support h.264 which is all vimeo serves, and disabling plugins will disable whatever plugin is making h.264 work on firefox.

<!DOCTYPE html>
<html>
  <head>
    <style>
div {
  display: inline-block;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  position: absolute;
}
iframe {
  -webkit-transform: scaleX(-1) rotate(2deg);
}
    </style>
  </head>
  <body>
    <div>
      <iframe sandbox="allow-same-origin allow-scripts allow-popups"
        id="foo" width="100%" height="90%"
        allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" 
        src="http://player.vimeo.com/video/28544156?api=1">
      </iframe>
    </div>
  </body>
</html>
teknotus
  • 314
  • 2
  • 4
  • teknotus, this is an interesting solution from a technical perspective. However, the code posted above doesn't work form me in testing (at this time): Instead of an embedded video I just get a black box. I'm using Chrome 30 with no extensions enabled and all popups allowed. Does that config work for you? – Nick Aug 27 '13 at 05:40
  • @nickv2002 I added a whole html file to my response which I just tested. Hope that helps. Sorry I didn't respond earlier the message notification in stackoverflow was a little too subtle, and I didn't even see it for over a month. – teknotus Oct 11 '13 at 17:47
  • Between the time of your my comment and your followup Vimeo seems to have changed their ebed code to default to HTML5 whenever I test it. It still falls back to Flash in Firefox but Safari and Chrome get HTML5. So no hacks needed anymore! – Nick Oct 12 '13 at 22:18