Iframe issue without URL

[waffleslop]

I would like a video to display on a Discourse Topic based on the following embed code. Note that I have whitelisted the iframe domain in Settings: (https://cmox.cdn.vooplayer.com/).

<script src="https://cmox.cdn.vooplayer.com/assets/vooplayer.js"></script><iframe allow="autoplay" class="video-player-container vooplayer" data-playerId="MTM3ODA1" allowtransparency="true" style="max-width:100%" name="vooplayerframe" allowfullscreen="true" src="" watch-type="" url-params="" frameborder="0" scrolling="no"> </iframe>

Despite whitelisting, the iframe isn’t working. I believe that is because the URL is inside a <script> tag.

Any ideas on what I can try to get this video player to work?

[codinghorror (Jeff Atwood)]

You did not whitelist <script>, you only whitelisted <iframe> so I would not expect this to work…

[waffleslop]

Yeah, that makes sense. Can I whitelist the script tag somehow?

I added the script tag into Admin > Customize, then in the Header for the Light theme (the default).

The video is still not displaying.

What am I missing?

[Johani (Joe)]

What am I missing?

Since the script you’re adding

<script src="https://cmox.cdn.vooplayer.com/assets/vooplayer.js"></script>

is considered third-party, you would need to whitelist it. You can do that by adding

https://cmox.cdn.vooplayer.com/assets/vooplayer.js

to the content_security_policy_script_src site setting in the admin like so

If you’d like to learn more about Content Security Policy and how it affects Discourse customizations, please have a look here

Also note that the src attribute in your Iframe code is empty so it doesn’t really load anything. Make sure the src attribute is set to the src of the Iframe you’re trying to load.

[waffleslop]

Joe, I should have been able to find this answer without bugging y’all. Is there a bigger document on how to use Discourse that I can check in the future? Otherwise, I’m just searching Meta. And with all the great how-tos I’ve seen, I bet the Discourse team has built a bigger doc.

Can you point me in the right direction?

Also, I’m super grateful for all y’all do. Meta is such a killer community and the codebase seems so solid.

[codinghorror (Jeff Atwood)]

One downside here, you have made this script a dependency for your entire site, so every page downloads that extra script now.

[waffleslop]

Still having issues.

I’m unable to get this script to display on my Discourse site:

<script src="https://cmox.cdn.vooplayer.com/assets/vooplayer.js"></script><iframe allow="autoplay" class="video-player-container vooplayer" data-playerId="MTU1NTMy" allowtransparency="true" style="max-width:100%" name="vooplayerframe" allowfullscreen="true" src="https://cmox.cdn.vooplayer.com/publish/MTU1NTMy" frameborder="0" scrolling="no"> </iframe>

I have allowed the Script and iFrame:

I put together a simple plugin and installed it:
https://github.com/waffleslop/discourse-vooplayer

The code I have is as follows:
Discourse.Markdown.whiteListTag("div", "style", /[a-z]+/); Discourse.Markdown.whiteListTag("div", "class", /[a-z]+/); Discourse.Markdown.whiteListTag("iframe", "class", /[a-z]+/); Discourse.Markdown.whiteListTag("iframe", "style", /[a-z]+/);

However when I try to embed the video, this is what happens:

It looks like Discourse is stripping style and class from the embed.

Similarly, I am finding this:
<div class="123">test</div>
to be displayed as:
<div>test</div>

It looks like Discourse is stripping all class/style, even from simple divs.

What can I do to get this to work?

Thank you!

[Johani (Joe)]

@waffleslop

The code I have is as follows:
Discourse.Markdown.whiteListTag("div", "style", /[a-z]+/); Discourse.Markdown.whiteListTag("div", "class", /[a-z]+/); Discourse.Markdown.whiteListTag("iframe", "class", /[a-z]+/); Discourse.Markdown.whiteListTag("iframe", "style", /[a-z]+/);

This is a big no no. By adding this you’re removing some of the very important abuse prevention measures that Discourse has. We strip these things for a reason.

Long story short, I’ve looked at vooplayer embeds and you’re in for a bit of work. There’s going to be a lot of friction because the way vooplayer handles their iframes is not ideal in the context of a single page application.

I would strongly recommend that you use another service like Youtube or Vimeo if you can as these are supported out of the box in Discourse.

If you’re set on using vooplayer, then the scope of the help you need exceeds what we can provide and I would recommend a topic in the #marketplace category.

[waffleslop]

Thanks for spending time and reviewing the iFrame, Joe. I appreciate that!

Vooplayer has this “fallback” code I can use as well. Is it possible to get this to work simply?

<div style="position:relative; width:1px; min-width:100%; padding-bottom:56.25%"><iframe allow="autoplay" class="vooplayer" allowtransparency="true" style="width:1px; min-width:100%; height: 100%; position:absolute" allowfullscreen="true" src="https://cmox.cdn.vooplayer.com/publish/MTU1NTMy?fallback=true" frameborder="0" scrolling="no"> </iframe></div>

If not, I’ll take your direction to use Vimeo.

[riking (Kane York)]

Yes, that embed should just work with the iframe embed whitelist. You can drop the <div ....> and </div>.