How do you play a YouTube video when an image is clicked?
2014-10-04, 08:24 PM,
#1
Basically, I have the following image [Image: RcNEMXR.jpg]
and when its clicked and like it to disappear and have a YouTube player appear instead of it?

How can I do that?

[Image: R5I6Tcg.gif]
2014-10-04, 08:33 PM,
#2
Here use this:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo Page For Autoplay youtube video while clicking on a custom thumbnail image</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'><script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<style>
    body
    {
        margin    : 0;
        padding    : 0;
        background    : #EEE;
        color        : #333;
        font-family: 'Open Sans', sans-serif;
        font-size    : 12px;

    }
    #wrapper
    {
        width    : 1012px;
        margin    : 0 auto;

    }

</style>
<body>
    <div id="wrapper">
        <h1>Sined</h1>
        <div class="custom-th"><img src="[color=#FF0000]PUT THE LINK TO YOUR IMAGE HERE[/color]" style="cursor:pointer" /></div>
        <div id="thevideo" style="display:none">
        <object width="560" height="315"><param name="movie" value="https://www.youtube.com/v/[color=#FF0000]IDOFTHEYTVIDEO[/color]?&autoplay=1&hl=en_US&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/[color=#FF4500]IDOFTHEYTVIDEO[/color]?hl=en_US&version=3&autoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
        </div>

    </div>

    <script type="text/javascript">
    $(document).ready(function() {
        $('.custom-th').click(function() {
            $('.custom-th').fadeOut('slow', function() {
                $("#thevideo").css("display","block");
                });
            });
        });
    </script>
</body>
</html>
2014-10-04, 09:29 PM,
(This post was last modified: 2014-10-04, 10:13 PM by Adept.)
#3
(2014-10-04, 08:33 PM)Sined Wrote: Here use this:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo Page For Autoplay youtube video while clicking on a custom thumbnail image</title>
<link href='/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'><script  type="text/javascript" src="/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<style>
    body
    {
        margin    : 0;
        padding    : 0;
        background    : #EEE;
        color        : #333;
        font-family: 'Open Sans', sans-serif;
        font-size    : 12px;

    }
    #wrapper
    {
        width    : 1012px;
        margin    : 0 auto;

    }

</style>
<body>
    <div id="wrapper">
        <h1>Sined</h1>
        <div class="custom-th"><img src="[color=#FF0000]PUT THE LINK TO YOUR IMAGE HERE[/color]" style="cursor:pointer" /></div>
        <div id="thevideo" style="display:none">
        <object width="560" height="315"><param name="movie" value="/v/[color=#FF0000]IDOFTHEYTVIDEO[/color]?&autoplay=1&hl=en_US&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="/v/[color=#FF4500]IDOFTHEYTVIDEO[/color]?hl=en_US&version=3&autoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
        </div>

    </div>

    <script type="text/javascript">
    $(document).ready(function() {
        $('.custom-th').click(function() {
            $('.custom-th').fadeOut('slow', function() {
                $("#thevideo").css("display","block");
                });
            });
        });
    </script>
</body>
</html>

The video's music can be heard.. :/
EDIT: I can't get it to work properly. After the image fades out I just get a blank box instead of the video.

[Image: R5I6Tcg.gif]
2014-10-04, 10:30 PM,
#4
(2014-10-04, 09:29 PM)AdeptMT Wrote:
(2014-10-04, 08:33 PM)Sined Wrote: Here use this:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo Page For Autoplay youtube video while clicking on a custom thumbnail image</title>
<link href='/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'><script  type="text/javascript" src="/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<style>
    body
    {
        margin    : 0;
        padding    : 0;
        background    : #EEE;
        color        : #333;
        font-family: 'Open Sans', sans-serif;
        font-size    : 12px;

    }
    #wrapper
    {
        width    : 1012px;
        margin    : 0 auto;

    }

</style>
<body>
    <div id="wrapper">
        <h1>Sined</h1>
        <div class="custom-th"><img src="[color=#FF0000]PUT THE LINK TO YOUR IMAGE HERE[/color]" style="cursor:pointer" /></div>
        <div id="thevideo" style="display:none">
        <object width="560" height="315"><param name="movie" value="/v/[color=#FF0000]IDOFTHEYTVIDEO[/color]?&autoplay=1&hl=en_US&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="/v/[color=#FF4500]IDOFTHEYTVIDEO[/color]?hl=en_US&version=3&autoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
        </div>

    </div>

    <script type="text/javascript">
    $(document).ready(function() {
        $('.custom-th').click(function() {
            $('.custom-th').fadeOut('slow', function() {
                $("#thevideo").css("display","block");
                });
            });
        });
    </script>
</body>
</html>

The video's music can be heard.. :/
EDIT: I can't get it to work properly. After the image fades out I just get a blank box instead of the video.

Try to remove color tags

[Image: 3CUWUch.jpg]
2014-10-05, 12:07 AM,
#5
(2014-10-04, 10:30 PM)grof Wrote:
(2014-10-04, 09:29 PM)AdeptMT Wrote:
(2014-10-04, 08:33 PM)Sined Wrote: Here use this:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo Page For Autoplay youtube video while clicking on a custom thumbnail image</title>
<link href='/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'><script  type="text/javascript" src="/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<style>
    body
    {
        margin    : 0;
        padding    : 0;
        background    : #EEE;
        color        : #333;
        font-family: 'Open Sans', sans-serif;
        font-size    : 12px;

    }
    #wrapper
    {
        width    : 1012px;
        margin    : 0 auto;

    }

</style>
<body>
    <div id="wrapper">
        <h1>Sined</h1>
        <div class="custom-th"><img src="[color=#FF0000]PUT THE LINK TO YOUR IMAGE HERE[/color]" style="cursor:pointer" /></div>
        <div id="thevideo" style="display:none">
        <object width="560" height="315"><param name="movie" value="/v/[color=#FF0000]IDOFTHEYTVIDEO[/color]?&autoplay=1&hl=en_US&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="/v/[color=#FF4500]IDOFTHEYTVIDEO[/color]?hl=en_US&version=3&autoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
        </div>

    </div>

    <script type="text/javascript">
    $(document).ready(function() {
        $('.custom-th').click(function() {
            $('.custom-th').fadeOut('slow', function() {
                $("#thevideo").css("display","block");
                });
            });
        });
    </script>
</body>
</html>

The video's music can be heard.. :/
EDIT: I can't get it to work properly. After the image fades out I just get a blank box instead of the video.

Try to remove color tags

[img]/3CUWUch.jpg[/img]

I had removed them already Tongue
I managed to fix it though.

#close please

[Image: R5I6Tcg.gif]


Possibly Related Threads...
Thread Author Replies Views Last Post
  [HELP] Quality Youtube Views cracklings1017 3 78 Yesterday, 10:10 AM
Last Post: cracklings1017
  About Current YouTube Ranking kderow 1 98 Yesterday, 01:50 AM
Last Post: Watt
  Track YouTube Video Rank Manually+Useful Site Watt 21 947 2017-10-17, 11:35 PM
Last Post: dnxoom
  [NEW][<$30]Youtube Video Hack Proof at CHEAPEST rates.[PART2] justdidit 105 7,455 2017-10-16, 12:40 PM
Last Post: justdidit
  How to know the rank of your video for a certain keyword? berkxz 6 219 2017-10-15, 11:09 PM
Last Post: ogmark




About Us | Contact Us | CPA Elites | Advertise | Stats | Staff Team

© 2013-2017 CPA Elites Ltd
Enhanced by MyBB and WallBB
Return to top