Dat werkt allemaal prima.
Maar als ik de div sluit dan blijft de video doorlopen ook al zie je hem niet.
Nu lijkt dat eenvoudig op te lossen door een lege video te laden.
Maar dan krijg je problemen met de de browser "vorige" en "volgende".
Andere mogelijkheden die ik heb bekeken tot nu toe werken niet.
En zijn ook vooral uit de 'oude doos' oplossingen.
'youtuber' is de div.
function youtubereader(adres)
{
var wrapperHeight = document.getElementById("galleryListWrapper").offsetHeight;
wrapperHeight = wrapperHeight + 130;
document.getElementById("transpar").style.height = wrapperHeight+'px';
document.getElementById("transpar").style.display = "block";
document.getElementById("youtuber").style.display = "block";
var linkje = "https://www.youtube.com/embed/"+adres+"?autoplay=1&showinfo=0&start=0&rel=0&autohide=0&controls=1&modestbranding=1&vq=large&wmode=window';";
document.getElementById("youtubereader").src = linkje;
}
function youtubereaderoff() {
document.getElementById("youtubereader").src ="";
document.getElementById("youtuber").style.display = "none";
document.getElementById("transpar").style.display = "none";
}
<div id="transpar"><img src="blank.jpg"></div>
<div id="galleryWrapper">
<h1>Youtube Gallery</h1>
<div class="line"></div>
<div id ="youtuber"><iframe id = "youtubereader">
</iframe>
<input type="button" class="but" value="terug naar het overzicht" onclick= "youtubereaderoff()">
</div>
<div id="galleryListWrapper">
<ul id="galleryList" class="clearfix">
<li><a href="#" onclick="youtubereader('zOATXRLfW2c')" " title="zOATXRLfW2c" rel="colorbox"><img src="resources/cache/100x120-75-eacfcb9f52510a34d05f7fc28e19cf9fecfe0f6ede74db922185958b6770b16e.jpg" alt="zOATXRLfW2c"/></a></li>
.
.
.
.
