fancybox html inside webgl earth javascript

Question

I have a globe with markers made using webgl earth (http://www.webglearth.org/) and I am also using fancybox to display popup windows of youtube videos (http://fancyapps.com/fancybox/)

The issue that I have is that I want the link to a video to be inside the markers that I create and the problem that I've run into is that I can't use a standard html link inside javascript. I've also tried linking it by using a method found here but it's been unsuccessful (https://bencollier.net/2011/05/quickly-creating-an-html-link-in-javascript/)

Here is the site that I am working for that will show a marker in china (http://playground.eca.ed.ac.uk/~s1572393/map/globe.html#)

Here is the section of the code that has the issue;

var marker2 = WE.marker([35.8617, 104.1954]).addTo(earth);
            marker2.bindPopup("<b>China</b>",
                    {maxWidth: 120, maxHeight: 120, closeButton: true });

I'm trying to add the link after where it shows the name of the country. This is the link I want to use as it appears in HTML;

<a class="fancybox" href="http://www.youtube.com/watch?v=opj24KnzrWo">Youtube</a>

Any help or advice would be appreciated, thanks all.

Answer 1

Your video does not have the permission to be played from outside Youtube. Some video allows to be embed but some video does not. So try with other videos. Then you can put <a> tag into your globe code.

I tried with this video, it works.

marker2.bindPopup("<a class=\"fancybox\"  href=\"https://www.youtube.com/embed/XGSy3_Czz8k\">Youtube<\/a>",