asked on

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

cyberstalker

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

mrduckers

ASKER

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>

cyberstalker

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

mrduckers

ASKER

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.

ASKER CERTIFIED SOLUTION

cyberstalker

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mrduckers

ASKER

I have increased points as it is urgent.

mrduckers

ASKER

oh, i didn't see you had posted a working comment!