[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2439
  • Last Modified:

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

0
mrduckers
Asked:
mrduckers
  • 7
  • 3
1 Solution
 
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
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 7
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now