Achieve background-size: cover; with video?

[harryatkins]

Hi,

Does anyone know a solution to achieve the background-size: cover; functionality that we can use on background image on an iframe video embed? I can make it fluid width no problem. But I want the height to stay 100% as well. Basically to fill the entire browser window.

Any help would be greatly appreciated.

Thanks

[harryatkins]

Yeah thanks. But I did actually google my query obviously. That link is using the HTML5 element. Which I know is doable, I was asking if anyone knew how to achieve this same effect but with an iFrame embed from Vimeo. Like I mentioned. As the iFrame I can get to fill the screen but not the video inside of it.
Thanks for the help anyway though. I appreciate it.

[harryatkins]

No worries!

That’s what I had tried previously, 100% width and height on the iFrame. But yeah following your link Youtube seems to do that. Apparently Vimeo doesn’t. Hmm, strange. The client is using Vimeo as they prefer the embedded player to Youtube’s but I might have to convince them otherwise.

Thanks!

[harryatkins]

Hmm, yes. Form what I’ve found it should be working, but it just seems to keep the video’s aspect ratio and full width. And not fill the screen like the Youtube embed.

But I have found this: http://dfcb.github.io/BigVideo.js/

Which works on the tag but will also take vimeo direct upload links. SO I think I’ll use this for this project. I hope it helps anyone else as well.

[chrisburton]

fitVids.js?

Update: Oops. I just realized the title of the thread. Carry on.

[Author]

Posts