I have many video trailers on my web page and need to change data-youtube-id dynamically according for button of video user click...i added using the following code dynamically data-youtube-id and it looks like this:
<video class="vjs-tech" id="myvideo_html5_api" data-ratio="0.5625" style="padding-top: 56.25%;" preload="auto" data-youtube-id="XpICoc65uh0"></video>
And afterglow player only circle is shows that is loading..but video is not shown... i read that i need to use attr and not data to set jQuery attribute and that jQuery data cache is then automatically refreshed...i think i im missing some..could you try in your example webpage removing src from video element and adding data-youtube-id value and inverse?
Here is my jQuery code:
$(".afterglowplayer #myvideo video").attr("data-youtube-id", "XpICoc65uh0")).removeAttr("src");