Solved

Embed video with still image on "top"

Posted on 2011-09-19
2
559 Views
Last Modified: 2012-08-14
I have a video that needs to be used on a webpage.  I understand how to do that basic item. What  I am looking for a way to overlay a still image on the container that when clicked will start the video playing on the site.  The issue I have found with YouTube and Vimeo is that the freeze frame they use for the embed image is the exact middle of the video.  Typically this frame is not very pleasant to look at and does not convey what the video is about.  I am hoping to have nice looking image that will keep the user on the site not open a new window to the video hosted site.
Thanks
0
Comment
Question by:tty5
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 38

Accepted Solution

by:
lherrou earned 500 total points
ID: 36566376
tty5,

Basically, the best way to do this is with CSS and Javascript. Typically, you overlay a container with your image, and then use OnClick to remove that layer and start the video.

The following is one example of how to go about it: http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=401

Cheers,
LHerrou
0
 

Author Closing Comment

by:tty5
ID: 36593065
Sorry for the delay I was hoping to try it out before I responded but time got away from me. I am sure it will work. I am working mostly on legacy sites 7+ years old and I learn "new" things on an as needed basis.  

And yes, I remember NS Horizons! chuckle.  If you called for a system serial number in the late 80's there is a good chance you spoke to me, we were one of 2 phone numbers techs would call.  Hard to imagine that now.  Thanks for your help.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Pure CSS popout image menu - want the most beautiful style. 7 70
Replace value 2 32
Passing client data from form to server 5 21
compare date to getdate() 8 17
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
This video teaches users how to migrate an existing Wordpress website to a new domain.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question