Can I add Vimeo videos similar to YouTube?« Back to Questions List

I have downloaded your trial for exportkit and am about to make the purchase. I wanted to check on one thing before I do.

It is important that I am able to link Vimeo hosted videos to images in the responsive psd to html design. Preferable with with some sort of lighbox style popup.

I see that you have an option for Youtube, but is there a way to use Vimeo in a similar way? I have no problem doing this an the Dreamweaver end, but my testing hasn't worked using my usual methods.

Thanks and this is a great product. Just need to double check on this and I'll make the purchase.

Brett

Added December 12, 2014 3:48 pm

Do you have the right answer? If you do other users will benefit from your contribution, share your knowledge with the community!

Yes!

We have both native media elements (eg. youtube, wmv) and extendable ones such as Vimeo. You can add anything to your PSD design but it’s up to you how you want to add it.

Steps:

Consider Vimeo uses an <iframe /> by default

1. Use shapes as containers similar to our Media Object Tag for YouTube videos
- this means you draw the size of the Vimeo video

Group the shape container as a folder (important) 

2. Add a text layer inside the folder/group, on top of the shape

3. Use Code Tag to add the iframe:

<iframe src="//player.vimeo.com/video/[VIDEO_ID]" width="[WIDTH]" height="[HEIGHT]" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Make sure you add the iframe as content/text of the PSD text layer.

- change the width and height to match the shape
- or use 100% to fill the folder

Presto – Vimeo video!

JavaScript/CSS Lightbox

Tutorial pending...

You can do this with External JavaScript similar to our tutorial on adding Google maps. Search Google for a free javascript lightbox plugin and map your PSD layer name or class to match the lightbox name/class.

Resources:

Media Object Tag – //exportkit.com/plugin/layer-tags/advanced-layer-tags/object-tag
Code Tag – //exportkit.com/plugin/layer-tags/basic-layer-tags/code-tag
External JavaScript – //exportkit.com/plugin/environments/html5/using-external-files-with-html5

Answer by admin
Answered On December 12, 2014 3:49 pm #
Looking for another answer? View other questions in HTML Responsive Image or get premium support for guaranteed results.
Asked by Freethink★★★
2691 views
1 answer
Last Answered 10 years ago by admin

Categories

Recent Answers

asked by shanrt
asked by Ali Sodikin
asked by indian
[+] View All Recent Questions

Share Your Knowledge!

Contribute to the community and help other users to benefit from your answer with experience and knowledge.