My code looks like this, with the PHP variables determined throughout the script:

<script>
  embed['$vidid'] = '<iframe id="ytplayer" type="text/html" width="560" height="315" src="https://www.youtube.com/embed/$this_id?autoplay=1&rel=0&origin=$home" frameborder="0"></iframe>';
</script>

<div id="vid_$postdate"
onClick="document.getElementById('vid_$postdate').innerHTML = embed['$vidid'];">
  [show thumbnail for video]
</div>

So I have an associative array built with every Youtube link in it, and the video ID is the key for the array. When the user clicks, I change the HTML of the element they clicked to the value of the array (which is the IFRAME tag).

My initial thought is to set up another array of "clicked[]", then when they click on an element I would add its $vidid to clicked[]. Then when they click on any other element, it would read through clicked[] and change the HTML back to its thumbnail.

The only issue there, though, is that I'm not sure if that would actually stop the video, or if it would continue running in the background.

Sheesh, I think I found the solution... it's gonna require a complete rebuild >:-(

[developers.google.com...]

So now, on top of everything else, I have to drop everything and rebuild an already overly complicated feature to be even MORE complicated!

.... and it never ends.

What keeps us up at night. :)

(I don't video, but many do. So if you have a solution, post it ... eventually!)

Best wishes on a job well done!