Collapse iframe after embedded YouTube video ends

I have an image on my page that when clicked, is replaced by a large embedded YouTube video. Code here...

<img src=""/></div>

<div id="thevideo1">
<iframe id="iframe1" 
src="http://www.youtube.com/embed/myurl?
rel=0&vq=hd720&color=white&autoplay=0
&wmode=transparent&theme=light&showinfo=0"  
frameborder="0" allowscriptaccess="always" allowfullscreen="true">
</iframe>

And that bit works great. The image is a long thin banner. But after the video ends, it remains on the video screen and I'd like it to go back to the smaller image. I can't find how to do it though. Had no luck in searching for an answer or trying out bits. Is it possible to do? Many thanks


ANSWERS:


You can use jquery to "remove" your iframe when an video end.

To remove the iframw, simple use this code

$('#iframe1').remove();

Example:

To fire an event when the video end, please have a look at the following source

How to fire function on Embedded YouTube iFrame's end



 MORE:


 ? Can't Play iFrame embedded YouTube video on iPad
 ? How can i remove youtube links with this alternative embedding method? (not iframe)
 ? What exactly `Function.prototype.length` means?
 ? What's the difference between VarDeclaredNames and VarScopedDeclarations?
 ? Check if object is a constructor - IsConstructor
 ? Is there a specific reason why javascript has no isEqual() native function to compare Objects?
 ? What are the precise semantics of block-level functions in ES6?
 ? Why does '' (empty string) permeate all strings?
 ? Implementation of setInterval() and setTimeout() under ECMAScript 262
 ? Where is the immutable binding record of the identifier in a named function expression stored in JavaScript?