Menu
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?
298
Developers can use the iFrame API to programmatically create and interact with an Embed or with multiple Embeds in the same web app. The iFrame API includes methods that you can use to start playback, change the content rendering in an Embed, or stop playback.
Until and unless you have allow="autoplay;" in your iframe tag you wont be able to unmute the video. Add this attribute and further unMute function will work. Show activity on this post. Usually, you can just click the mute button to unmute it.
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. } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
