CODEWITHSUNDEEP
htmlyoutubeembedgoogle-apps-script
Michael Taylor
Michael Taylor

Reputation: 119

Post YouTube Video From inside HTML served up by Apps Script

I am serving up a HTML page from Apps Script using

    function doGet() {
      return HtmlService.createHtmlOutputFromFile('Generic.html');
    }

In the Generic.html, I've tried a couple of things. The normal "iframe" embed from YouTube definitely does not work.

    <iframe width="420" height="315" src="http://www.youtube.com/embed/bTiUVMQV0Ko" frameborder="0" allowfullscreen></iframe>

Tried the "old version of embed" from youtube:

    <object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/bTiUVMQV0Ko?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/bTiUVMQV0Ko?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

When I embed the old version directly in a site html page (instead of serving it up through apps script), It turns it into a google gadget and displays the code this way:

     <img src="https://www.google.com/chart?chc=sites&amp;cht=d&amp;chdp=sites&amp;chl=%5B%5BGoogle+Gadget%27%3D20%27f%5Cv%27a%5C%3D0%2710%27%3D419%270%27dim%27%5Cbox1%27b%5CF6F6F6%27fC%5CF6F6F6%27eC%5C0%27sk%27%5C%5B%22Embed+gadget%22%27%5D%27a%5CV%5C%3D12%27f%5C%5DV%5Cta%5C%3D10%27%3D0%27%3D420%27%3D312%27dim%27%5C%3D10%27%3D10%27%3D420%27%3D312%27vdim%27%5Cbox1%27b%5Cva%5CF6F6F6%27fC%5CC8C8C8%27eC%5C%27a%5C%5Do%5CLauto%27f%5C&amp;sig=lwVR4P8OQYTVXxdmEdsObNHzN2M" data-igsrc="http://0.gmodules.com/ig/ifr?mid=0&amp;synd=trogedit&amp;url=http%3A%2F%2Fwww.gstatic.com%2Fsites-gadgets%2Fembed%2Fembed.xml&amp;up_embed_snippet=%3Cobject%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20height%3D%22315%22%20width%3D%22420%22%3E%3Cparam%20name%3D%22movie%22%20value%3D%22http%3A%2F%2Fwww.youtube.com%2Fv%2FbTiUVMQV0Ko%3Fversion%3D3%26amp%3Bhl%3Den_US%22%20%2F%3E%3Cparam%20name%3D%22allowFullScreen%22%20value%3D%22true%22%20%2F%3E%3Cparam%20name%3D%22allowscriptaccess%22%20value%3D%22always%22%20%2F%3E%3Cembed%20allowfullscreen%3D%22true%22%20allowscriptaccess%3D%22always%22%20height%3D%22315%22%20src%3D%22http%3A%2F%2Fwww.youtube.com%2Fv%2FbTiUVMQV0Ko%3Fversion%3D3%26amp%3Bhl%3Den_US%22%20type%3D%22application%2Fx-shockwave-flash%22%20width%3D%22420%22%20%2F%3E%3C%2Fobject%3E&amp;w=420&amp;h=315" data-type="ggs-gadget" data-props="height:315;igsrc:http#58//0.gmodules.com/ig/ifr?mid=0&amp;synd=trogedit&amp;url=http%3A%2F%2Fwww.gstatic.com%2Fsites-gadgets%2Fembed%2Fembed.xml&amp;up_embed_snippet=%3Cobject%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20height%3D%22315%22%20width%3D%22420%22%3E%3Cparam%20name%3D%22movie%22%20value%3D%22http%3A%2F%2Fwww.youtube.com%2Fv%2FbTiUVMQV0Ko%3Fversion%3D3%26amp%3Bhl%3Den_US%22%20%2F%3E%3Cparam%20name%3D%22allowFullScreen%22%20value%3D%22true%22%20%2F%3E%3Cparam%20name%3D%22allowscriptaccess%22%20value%3D%22always%22%20%2F%3E%3Cembed%20allowfullscreen%3D%22true%22%20allowscriptaccess%3D%22always%22%20height%3D%22315%22%20src%3D%22http%3A%2F%2Fwww.youtube.com%2Fv%2FbTiUVMQV0Ko%3Fversion%3D3%26amp%3Bhl%3Den_US%22%20type%3D%22application%2Fx-shockwave-flash%22%20width%3D%22420%22%20%2F%3E%3C%2Fobject%3E&amp;w=420&amp;h=315;mid:0;spec:http#58//www.gstatic.com/sites-gadgets/embed/embed.xml;up_embed_snippet:&lt;object xmlns=&quot;http#58//www.w3.org/1999/xhtml&quot; height=&quot;315&quot; width=&quot;420&quot;&gt;&lt;param name=&quot;movie&quot; value=&quot;http#58//www.youtube.com/v/bTiUVMQV0Ko?version=3&amp;amp#59hl=en_US&quot; /&gt;&lt;param name=&quot;allowFullScreen&quot; value=&quot;true&quot; /&gt;&lt;param name=&quot;allowscriptaccess&quot; value=&quot;always&quot; /&gt;&lt;embed allowfullscreen=&quot;true&quot; allowscriptaccess=&quot;always&quot; height=&quot;315&quot; src=&quot;http#58//www.youtube.com/v/bTiUVMQV0Ko?version=3&amp;amp#59hl=en_US&quot; type=&quot;application/x-shockwave-flash&quot; width=&quot;420&quot; /&gt;&lt;/object&gt;;width:420;" style="display:block;text-align:left;margin-right:auto;" class="igm" height="315" width="420">

Have tried putting this my Generic.html page as well but just get the gray Google Gadget screen.

Any ideas? (including any general work-around tips for Google sites and embed/iframe)

Thanks!

Upvotes: 0

Views: 1008

Answers (1)

Corey G
Corey G

Reputation: 7858

There is demo code on the Caja site. This code 'should' work but doesn't:

function doGet() {
  return HtmlService.createHtmlOutput(
    '<object width="240" height="195">' +
    '<param name="movie" value="http://www.youtube.com/v/unhiT2D6WvE?' +
    'version=3&hl=en_US"></param>' + 
    '<param name="allowFullScreen" value="true"></param>' + 
    '<param name="allowscriptaccess" value="always"></param>' + 
    '<embed src="http://www.youtube.com/v/unhiT2D6WvE?' + 
    'version=3&hl=en_US" type="application/x-shockwave-flash" ' + 
    'width="240" height="195" allowscriptaccess="always" allowfullscreen="true">' + 
    '</embed></object>');
}

I am not clear on why it does not. It may be that we didn't properly allow flash through the sandbox; if so we will fix it.

Upvotes: 3

Related Questions