0

When I click the button the fancybox iframe open and the video is playing but the button I clicked just disappears.

HTML

<div id="playlightbox">

    <a id="videoplay" class="fancybox fancybox.iframe" rel="group"></a>

</div>

Javascript

$(document).ready(function() {
    $(".fancybox").fancybox();
});

button.onclick = function () {
                    var selectedId = this.id;


                    onYouTubeIframeAPIReady(selectedId);


                    var videoUrl = 'http://www.youtube.com/embed/' + player.h.h.videoId;

                    var a = document.getElementById('videoplay');
                    a.setAttribute('href', videoUrl);

                    a.appendChild(this); //reason the button disappear


                };

Devoloper Tools (when I click the button this is what I get in devloper tools, and it works but the button disappears)

<a id="videoplay" class="fancybox fancybox.iframe" rel="group" href="http://www.youtube.com/embed/JP5Dr63TbSU"><button id="JP5Dr63TbSU" style="height: 35px;">Watch Trailer</button></a>

Any help is very much appreciated! =]

Mat
  • 51
  • 1
  • 7
  • Why do you have a button nested in an anchor in first place> http://stackoverflow.com/q/6393827/1055987 .... you could style the anchor itself as button. Second, you may not need to be changing the url `onclick` but use `data` attributes to get the video's ID like `data-id="JP5Dr63TbSU"` and then use fancybox `beforeLoad` callback to append the video ID to the url – JFK Nov 21 '15 at 19:12
  • Check http://stackoverflow.com/a/11619396/1055987 to get the idea how to use and pass `data` attributes to fancybox – JFK Nov 21 '15 at 19:14
  • Or check this sample http://jsfiddle.net/gvhuo1cd/ – JFK Nov 21 '15 at 19:26
  • Thanks! styling the anchor as button worked well and sample helped! – Mat Nov 22 '15 at 14:06

0 Answers0