css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Nifty newish html5 in a simple format.


  1. its awesome!

  2. I have been working with video a lot, but I was wondering why you have your type set to video/webm when the compression is H.264?

  3. That's a good question. I'm still just learning how html5 handles video; what should it be set to?

    Edit: now I feel dumb, just set the type to video/mp4. Thanks man.

  4. Just found it (I think this is the one you meant): http://codepen.io/juanbrujo/pen/Baeiv

    It's made with a nifty LESS+jQuery technique that's a bit over my head, but you could also do it with a linear gradient on an :after pseudo element:

    video:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: none; background: -webkit-linear-gradient(-45deg, rgba(125,185,232,1) 56%,rgba(30,87,153,0.7) 56%,rgba(30,87,153,0) 57%); background: linear-gradient(135deg, rgba(125,185,232,1) 56%,rgba(30,87,153,0.7) 56%,rgba(30,87,153,0) 57%); }


  5. Yes, that is the pen I was looking for! Thank you very much, now just if I could get my head around the code that was used to create it. I'll also try your linear gradient version, I like these types of effects.


  6. Neat. I suspect one could also do it with an svg background image, but I haven't looked into it really.

  7. It's awesome, but how can change the video ? Though I tried a little...

  8. This is nice, something that I need now. Only thing that's not clear to my is from where you get the "src"? How to incorporate that with video that I need from vimeo?

  9. For changing the video, or getting a video to play from the src attribute, you need to link directly to a file. I'm using one from Vimeo, but note that I'm linking directly to a file, and not to the page that Vimeo would normally present.

  10. it seems that the only way to link directly to a file is with a PRO subscription...

  11. The file url must come from the server to which the file is uploaded, like an image file url. A "file" url will always include a "file extension". A webpage video url will have a video ID, but not a file extension. That's kind of an easy way to define the difference. As an example, I upload my video files to the host server on which I build my sites. Therefore, I have direct access to that file url. If you yourself have direct access to the file url, you can copy that url and paste it into this code. Your website host platform, your YouTube account for videos which you own, your Vimeo account for videos which you own, or videos that you have downloaded. If you've downloaded a video and then uploaded it to your host server, or you yourself filmed the video and uploaded it to a web server or video hosting server, you have access to that video file url in either case. I hope I'm not being too confusing. Think of when you right click on an image and choose the option to view image, you will see a file extension for that file. So, give it a try. good luck and enjoy! BTW...great pen. :)

  12. Thanks Mandy, that does a great job of answering the question.

    For the curious, I actually moved to using a Vimeo video because it was cheaper than hosting the video myself. All the forked pens were generating a huge amount of traffic, and incidentally a huge bill for data transferred from my private server, like, 70-100USD per month.

    Cautionary tale for anyone with an mp4 they want to host themselves :)

    If you break down the url in my video element's src attribute, it is actually a filename, there's just a long authentication string after it, which might be were some of the confusion comes from.


    is actually just: https://player.vimeo.com/external/158148793.hd.mp4 (+ profile id + auth token)

  13. were can I get my Profile ID and Auth Token at Vimeo?

  14. @Ben, You should be able to get them from a developer page within Vimeo's Pro Account.

  15. This is just what I was looking for, thank you! I didn't know that you could utilize Vimeo to host filed like you've done in this example, probably not going to pull the trigger today, but I will keep in mind if I host more client video files! For those that are interested, Vimeo PRO is $199/year

  16. 15% of cpu use, not good

  17. Hello Matt Gross, congratulations, excellent work, could you please help me with a little tutorial on how to generate the video url?

  18. @Studioflora, the CPU usage is tied to the particular video, right?

  19. @benjaDGT, The video url can be done in a couple different ways. The one in this tutorial is grandfathered in on the old Vimeo embed API, so just copying that link won't work great. I'll probably swap it out for a YouTube one sometime soon.

    You can view the parameters for generating a YouTube embed here: https://developers.google.com/youtube/player_parameters

    An iframe (like the ones in the link above), would be just as effective if used in place of the element in the pen.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.