Home/ Questions/Q 7995209
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T14:20:34+00:00

I have simple html code that plays YouTube video after click on the image:

  • 0

I have simple html code that plays YouTube video after click on the image:

<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<div id="ytapiplayer2" style="display:none;">
<object width="1280" height="745">
<param name="movie" value="http://www.youtube.com/v/kCfP003Btjw?fs=1&hl=en_US&rel=0&autoplay=1"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/kCfP003Btjw?fs=1&hl=en_US&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="745"></embed>
</object>

</div>


<img src="https://i.qmyimage.com/mgen/global/zGetImageNew.ms?args=%22shpimg4198.jpg%22,425,96,1" id="imageID" />
<script type="text/javascript">
$('#imageID').click(function() {
$('#ytapiplayer2').show();
$('#imageID').hide();
});
</script>
</body>

I need hide the video and show image back, after video finished play. How is it possible to implement?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Youtube has a JavaScript API: https://developers.google.com/youtube/js_api_reference

    What you need is the onStateChange event, which will give you 0 when ended.

    player.addEventListener("onStateChange", function(state){
    if(state === 0){
        // the video is end, do something here.
    }
});
    • 0