Solved

Embed video with still image on "top"

Posted on 2011-09-19
2
540 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
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Using YubiKey with REST API application 2 80
Swiper slider stops between pages 11 32
archiving old posts 9 25
Do we need servers??? 5 133
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
In this article you will learn how to create a free basic website on Bitbucket, a git service provider. Polymer creates dynamic HTML components, which allow more flexibility than static HTML. This tutorial uses Ubuntu Linux but can also be done on W…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

757 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now