Click on image to display video

Posted on 2012-08-15
Medium Priority
Last Modified: 2013-10-09
I have a html page with placeholder to play video.
I have six different images below it. If i click on one of the images a different video should be shown in my placeholder. Any help appreciated
Question by:netdeveloper1
  • 3
  • 2
LVL 10

Expert Comment

by:Nancy McCullough
ID: 38299072
Are you looking for the HTML to make an image link to a video? HTML 4 or HTML 5?

Author Comment

ID: 38299079
I have six different images and click the image show show the video in one predefined  region . SO if the video 4 is playing and if click on image5  then video4 should be replaced with video 5
LVL 10

Expert Comment

by:Nancy McCullough
ID: 38299102

<a href="yourvideo.swf">Play My Video</a>

Looks like this:

Play My Video

and is clickable to play your video.
Technology Partners: 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!


Author Comment

ID: 38299120
I wish it was that easy. As i mentioned in pervious messages. I need to swao videos in my place holder depending on what link is clicked
LVL 10

Expert Comment

by:Nancy McCullough
ID: 38299200
Another method would be to add the video as an object. This would allow you to define the placement and other attributes to the vid.



to the anchor to ensure that it displays in the correct area
LVL 60

Accepted Solution

Julian Hansen earned 2000 total points
ID: 38299566
Here is some very simple code that illustrates the concept using JQuery

<!doctype html>
<title>EE Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('a').click(function(e) {
    $('#video').attr('data', $(this).attr('href'));
<style type="text/css">
  <div style="width: 458px; height: 342px">
    <object data="clip0003.flv" width="458" height="343" id="video">
  <a href="clip0001.flv">One</a>
  <a href="clip0002.flv">Two</a>
  <a href="clip0003.flv">Three</a>

Open in new window


Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

839 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