Overlay youtube embedded video with image, when click hide image and autoplay

Hi,

I have a youtube video embedded in my page but dont like the preview frame images they have given.

I want to overlay this with my own image and when clicked, display the video and auto play it, all wihtout reloading the page.

So far I can display the image and hide it and show the youtube clip, but I can't start it. Is there a way to auto start it with an onclick of the image.

I've supplied the code so far.




<div id=image onclick="document.getelementbyid('image').style.display=none;document.getelementbyid('video').style.display=block;">my image</div>
<div id=video style="display:none"><object width="425" height="344"><param name="movie" value="XXXXXXXXXXXXXX"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="XXXXXXXXXXXX" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object></div>

Open in new window

mrduckersAsked:
Who is Participating?
 
cyberstalkerCommented:
I see. swfobject for some reason doesn't work inside a hidden div. Setting visibility to hidden however does work. This page I have tested and does work. I also set the flash with an absolute position so it doesn't jump when the image is hidden.
<html>
    <head>
        <title>Youtube test page</title>
        <script type="text/javascript" src="scripts/swfobject_modified.js"></script>
        <script type="text/javascript">
        function start_playback()
            {
                var image                   =   document.getElementById('overlay');
                var myytplayer              =   document.getElementById('myytplayer');
 
                image.style.visibility      =   'hidden';
                myytplayer.style.visibility =   'visible';
                myytplayer.playVideo();
            }
        </script>
        <style type="text/css">
            #container  {   position: relative;                                             }
            #myytplayer {   position: absolute; left: 0px; top: 0px; visibility: hidden;    }
        </style>
    </head>
    <body>
        <div id="ytapiplayer">
            You need Flash player 8+ and JavaScript enabled to view this video.
        </div>
        <div id="container">
            <img id="overlay" src="images/racv1.gif" onclick="start_playback()">
            <script type="text/javascript">
                var params = { allowScriptAccess: "always" };
                var atts = { id: "myytplayer", style: "visibility: hidden" };
                swfobject.embedSWF("http://www.youtube.com/v/PB2gPyg-v9Y&hl=en&fs=1&enablejsapi=1&playerapiid=ytplayer",
                                   "ytapiplayer", "425", "356", "8", null, null, params, atts);
            </script>
        </div>
    </body>
</html>

Open in new window

0
 
cyberstalkerCommented:
Something like this perhaps? You will need to download swfobject
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    function start_playback()
    {
        var image               =   document.getElementById('image');
        var video_div           =   document.getElementById('video');
        var myytplayer          =   document.getElementById('myytplayer');
        
        image.style.display     =   'none';
        video_div.style.display =   'block';
        myytplayer.playVideo();
    }
</script>
<div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<div id=image onclick="start_playback()">my image</div>
<div id=video style="display:none">
    <script type="text/javascript">
        var params = { allowScriptAccess: "always" };
        var atts = { id: "myytplayer" };
        swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID&enablejsapi=1&playerapiid=ytplayer", 
                           "ytapiplayer", "425", "356", "8", null, null, params, atts);
    </script>
</div>

Open in new window

0
 
mrduckersAuthor Commented:
it seemed to work ok but the video doesn't hide atthe start. This is what I am using (random video)


<script type="text/javascript" src="scripts/swfobject_modified.js"></script>
<script type="text/javascript">
    function start_playback()
    {
        var image               =   document.getElementById('image');
        var video_div           =   document.getElementById('video');
        var myytplayer          =   document.getElementById('myytplayer');
       
        image.style.display     =   'none';
        video_div.style.display =   'block';
        myytplayer.playVideo();
    }
</script>
<div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<div id=image onclick="start_playback()"><img src="images/racv1.gif" /></div>
<div id=video style="display:block">
    <script type="text/javascript">
        var params = { allowScriptAccess: "always" };
        var atts = { id: "myytplayer" };
        swfobject.embedSWF("http://www.youtube.com/v/PB2gPyg-v9Y&hl=en&fs=1&enablejsapi=1&playerapiid=ytplayer",
                           "ytapiplayer", "425", "356", "8", null, null, params, atts);
    </script>
</div>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
cyberstalkerCommented:
That is because you changed the code i provided so that the div with id video has a display: block instead of display: none. Change it to this and it will work
<script type="text/javascript" src="scripts/swfobject_modified.js"></script>
<script type="text/javascript">
    function start_playback()
    {
        var image               =   document.getElementById('image');
        var video_div           =   document.getElementById('video');
        var myytplayer          =   document.getElementById('myytplayer');
       
        image.style.display     =   'none';
        video_div.style.display =   'block';
        myytplayer.playVideo();
    }
</script>
<div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<div id="image" onclick="start_playback()"><img src="images/racv1.gif" /></div>
<div id="video" style="display: none;">
    <script type="text/javascript">
        var params = { allowScriptAccess: "always" };
        var atts = { id: "myytplayer" };
        swfobject.embedSWF("http://www.youtube.com/v/PB2gPyg-v9Y&hl=en&fs=1&enablejsapi=1&playerapiid=ytplayer",
                           "ytapiplayer", "425", "356", "8", null, null, params, atts);
    </script>
</div>

Open in new window

0
 
mrduckersAuthor Commented:
i just copied that as is.
The flash appears above the image

Ined the image to display instead of the video. and only to appear and play after clicking the image.
0
 
mrduckersAuthor Commented:
I have increased points as it is urgent.
0
 
mrduckersAuthor Commented:
oh, i didn't see you had posted a working comment!
0
 
mrduckersAuthor Commented:
i can't reduce points so I'll just accept it as it is working great
0
 
mrduckersAuthor Commented:
Actually, I've just noticed. The video doesn't autoplay anymore. Could you have a look at this please.
0
 
mrduckersAuthor Commented:
hey cyber, do you have any suggestions for this?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.