3

All,

I'm trying to embed Youtube videos and SoundCloud audio clips into a CartoDB infoWindow. I'm trying to do this by simply using the {{embed}} column and entering it into the custom infoWindow html...

<div class="cartodb-popup">
  <a href="#close" class="cartodb-popup-close-button close">x</a>
  <div class="cartodb-popup-content-wrapper">
    <div class="cartodb-popup-content">
      <h4>name</h4>
      <p>{{name}}</p>
      <h4>description</h4>
      <p>{{description}}</p>
                {{embed}}
    </div>
  </div>
  <div class="cartodb-popup-tip-container"></div>
</div>

To see the result, click one of the two point features in the map:

Result Map:

http://cdb.io/K8yZ9V

SoundCloud embed code:

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/74986952&amp;color=ff5500"></iframe>

Youtube embed code:

<iframe width="420" height="315" src="http://www.youtube.com/embed/VlmgW9t3dxg" frameborder="0" allowfullscreen></iframe>
  • have a look at your url for the YouTube video. You're missing the http at the beginning. And your soundcloud url looks weird too. – Fezter Jan 17 '14 at 4:37
  • @Fezter both were copy and pastes from their respective share/embed options. Youtube missing 'http:' still behaves that way in my browser! Unfortunately that doesn't solve the problem, but thank you! – DPSSpatial Jan 17 '14 at 5:55
  • Yeah, it worked in my browser too. Just a thought, anyway... – Fezter Jan 17 '14 at 9:31
2

The answer that @Javier provided in January was totally correct at that time, but now due to security restrictions inserting iframes inside the CartoDB Editor (infowindows or legends) is no longer supported.

In order to achieve it, you'd need to use CartoDB.js to create your customs infowindows. Besides this, make sure you disable "sanitizeTemplate" so that your scripts are not removed.

sanitizeTemplate: By default all templates are sanitized from unsafe tags/attrs 
(e.g. <script>), set this to false to skip sanitization, or a function to provide
your own sanitization (e.g. function(inputHtml) { return inputHtml })).
  • Please can you add more information, I cannot understand how to get a video to embed from this. What do I need to put as code in the Custom HTML section to make it display? – ndthl Oct 28 '15 at 19:58
  • In the CartoDB Editor there's no way to embed a video/iframe. You would need to write a small HTML + CartoDB.js application in which you can set the sanitize function to false. There's an example here: bl.ocks.org/jsanz/d5524a6513fee65e3065 – iriberri Nov 2 '15 at 10:45
4

From the mustache documentation:

All variables are HTML escaped by default. If you want to return unescaped HTML, use the triple mustache: {{{name}}}.

So in your code, you'll need to write:

{{{embed}}}

My recommendation, however, is storing the URL in a row and writing the iframe tag in the template:

<div class="cartodb-popup">
  <a href="#close" class="cartodb-popup-close-button close">x</a>
    <div class="cartodb-popup-content-wrapper">
      <div class="cartodb-popup-content">
        <h4>name</h4>
        <p>{{name}}</p>
        <h4>description</h4>
        <p>{{description}}</p>
           <iframe width="100%" height="166" scrolling="no" frameborder="no" src="{{url}}"></iframe>
      </div>
    </div>
    <div class="cartodb-popup-tip-container"></div>
  </div>
  • Thank you @Javier! ... the SoundCloud worked, but the Youtube doesn't show up. Going to dig into this more today... – DPSSpatial Jan 17 '14 at 14:43
  • 1
    I actually just yesterday was experimenting with youtube, got an example working at cholmes.cartodb.com/viz/cecd413c-7eff-11e3-ae96-5404a6a69006/… Was pretty simple: <div class="cartodb-popup dark"> <a href="#close" class="cartodb-popup-close-button close">x</a> <div class="cartodb-popup-content-wrapper"> <div class="cartodb-popup-content"> <iframe width="260" height="215" src="//www.youtube.com/embed/QK8mJJJvaes" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="cartodb-popup-tip-container"></div> </div> – cholmes Jan 17 '14 at 16:18
  • Thanks @cholmes ... I notice your URL doesn't have HTTP: in it either... weird, eh? Have you tried the {{{embed}}} or {{url}} as noted above? – DPSSpatial Jan 17 '14 at 16:50
  • Huh, that is weird. I just grabbed straight from youtube. And I haven't tried embed or url, don't have any data set up well for that at the moment. – cholmes Jan 17 '14 at 18:54
1

<script> sublayer.infowindow.set({ template: $('#infowindow_template').html(), sanitizeTemplate:false, width: 218, maxHeight: 100 }); </script> <div class="cartodb-popup v2"> <a href="#close" class="cartodb-popup-close-button close">x</a> <div class="cartodb-popup-content-wrapper"> <div class="cartodb-popup-content"> <h4>description</h4> <p>{{description}}</p> <h4>sound_url</h4> <p><audio controls><src="{{sound_url}}" type="audio/mpeg"></audio></p> </div> </div> <div class="cartodb-popup-tip-container"></div> </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.