Question

Speakerdeck

uses a script to embed a call which will setup an api and json response, like:

{
    "version": "1.0",
    "type": "video",
    "provider_name": "YouTube",
    "provider_url": "http://youtube.com/",
    "width": 425,
    "height": 344,
    "title": "Amazing Nintendo Facts",
    "author_name": "ZackScott",
    "author_url": "http://www.youtube.com/user/ZackScott",
    "html":
        "<object width=\"425\" height=\"344\">
            <param name=\"movie\" value=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"></param>
            <param name=\"allowFullScreen\" value=\"true\"></param>
            <param name=\"allowscriptaccess\" value=\"always\"></param>
            <embed src=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"
                type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\"
                allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed>
        </object>",
}

Simply placing a Speakerdeck embed link, like:

<script async class='speakerdeck-embed' data-id='4ece03012a0554004f008afa' data-ratio='0.9534450651769087' src='//speakerdeck.com/assets/embed.js'></script>

works well, but I have not been able to integrate it with fancybox v2. But the problem seems more with running a a href="script" than it does with the oEmbed api json within a fancybox iframe. (But not sure of that.)

So I broke it down to the minimum of just launching the script via an a href="script" link – because fancybox uses the a element – I have tried a few variations of:

<a href="javascript(async class='speakerdeck' data-id='4ece03012a0554004f008afa' data-ratio='0.9534450651769087' src='//speakerdeck.com/assets/embed.js')" >show it</a>

All I’ve gotten is a spinning loader icon, and worse.

I think I am just having a mental error over the obvious, can you help?

Answer 1

If you already have your data-id='4ece03012a0554004f008afa', it would be as simple as passing it directly into the href link via an embed method like

<a class="fancydeck" href="http://speakerdeck.com/embed/4ece03012a0554004f008afa">CLICK to open speakerdeck inside fancybox</a>

Then just use this fancybox custom script

$(document).ready(function() {
 $(".fancydeck").fancybox({
  type : "iframe",
  width: 640, // or whatever
  height : 420,
  fitToView : false
 });
}); // ready

SEE DEMO

NOTE: I am using fancybox 2.x in my demo but I don’t see why not it wouldn’t work with v1.3.4