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" 
frameborder="0" allowscriptaccess="always" allowfullscreen="true">

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


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

To remove the iframw, simple use this code



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


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