Click on image to display video

Posted on 2012-08-15
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
    LVL 10

    Expert Comment

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

    Author Comment

    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

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

    Looks like this:

    Play My Video

    and is clickable to play your video.

    Author Comment

    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
    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 49

    Accepted Solution

    Here is some very simple code that illustrates the concept using JQuery

    <!doctype html>
    <title>EE Test</title>
    <script src=""></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


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Android App Development

    This course will involve creating widgets, customize list view, grid view, spinners, etc. Creating applications using audio, video, and SQLite database. Ending with publication on Google Play.

    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    759 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

    7 Experts available now in Live!

    Get 1:1 Help Now