Layer 4 copy

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


Please wait - we are now uploading and converting your file...


Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

Custom Video Player

Custom Video Player

Added a new feature today that you can use to create your own custom video player. Sure you can use YouTube or something similar, but then the video player is branded to YouTube and only allows you up to 10 minutes of video. If you have a need for something a bit more personal, now you can design your own frame for your video, design your own controls, and all the code is written for you. All you have to do is name the layers right.

As with any psd2css Online feature, the trick is in how you name the layers of your Photoshop design. For this feature, there are 4 new Layer Naming Conventions. The most important is _video. Draw a rectangle somewhere in your web page design for the actual video and name that layer with the _video Layer Naming Convention. So 'myvid_video' for example. Really that's all you need to do. But if you want your users to be able to pause, rewind or play your video again, then you'll want controls too. Just draw the controls and name them with the _play, _pause or _rewind Layer Naming Conventions. Make sure the first part of the _video layer name matches the first part of the _play, _pause and _rewind layer names. So for our example if you had a myvid_video layer, then the controls for it would be myvid_play and myvid_rewind, etc.

As with most psd2css Online features you can mix and match too. So if you want a mouse over effect for your controls just use the _link and _linkover features as well. So for the example above you might have a myvid_play_link and myvid_play_linkover pair that work as the 'play' button for your video.

Here is the page generated in the video (I added the text by hand):

Here is a link to the PSD file used in the video:

The video file itself has to be a Flash FLV video file. That is the standard format that Adobe Flash videos are in. The name of the FLV file needs to match what you used in the layer name. For our example above, the layer we called myvid_video will get code generated that will play a video file called myvid.flv. We supply a place holder video that is already named correctly in the page we host for you and in the zip file with all the other generated code. You'll certainly want to replace that FLV file with your own.

Converting pretty much any other video file to FLV is very simple anymore. There are lots of online tools that you can use for free to convert all sorts of video formatted files to FLV. Just google 'convert FLV online' or something. There are open source tools that you can download and use too. mencoder and ffmpeg are very good and have tons of options. There are lots of GUI conversion tools made from them as well. Of course Adobe Flash comes with a utility to convert any video file to FLV.

In the video I made above I used this website:



I resized the video in my editing software to fit the exact size i made it on my PSD file but it is still too small... how do I fix this??

Custom Video Player

Really very nice work I would like to congratulate the new member to your site and I thank you welcome to our website

Is there a way to add a

Is there a way to add a fullscreen option? Great work!!!

vimeo player

hello Shaun, thanks a lot for all this..just yesterday i was designing a very simple landing page with just an email link and a video player and i dont have any idea about code :(, maybe this method can work really for me..
Anyway, i was wondering this since Vimeo files are compressed in .flv format, could you explain quickly if it possible? and how?

thanks again,

H.264 and ogg

Great work. Forgive me if I am repeating this comment. I do not see it in the thread but is it possible to do this with ogg or h.264 video?


Fantastic Work Shaun!

I would love a Mailing List set up, perhaps a tutorial?

Would this be possible?!

ow about video in a menu?

Wondering if it's possible to do this - but with the video in a pop up window? Maybe like the menu box method? I would like to have the user click a button to open a showreel window - The window is a picture of an old tv as the frame. The video plays - then the window/menu closes. or an option to close the window when the user wants to


I love you Shaun!

Great Shaun!

Can't wait to try it!

H.264 and ogg

Great work, Shaun.

Do you have a version in the works that work with H.264 and ogg videos?

copyright (c) 2009 psd2css Online, Inc.



User login

Become a Fan of our Facebook Page

Need help or have a question?

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content