Embed Allowed Domains

[2TonWaffle]

Exploring the new Beta, which is, for one thing, pretty swell, I'm working on the new custom iframe feature for embeds. One of the concerns I had prior to seeing that the source code feature was being removed was that I would not be able to insert the iframe code for podcast episode mini-player directly into a post or topic. Currently, it looks like this within v4

I've added the domain "player.captivate.fm" as an allowed domain, but it only inserts the thumbnail with a link to the mini-player, which, when you click on the link, takes you to the player itself as a new tab. 

I've tried with just captivate.fm as the allowed domain but, I get the same results. Wondering if this is just how it will be going forward. I'm excited about these new features and changes that have been added to Invision Community. Many of the changes will require some getting used to and making some changes to workflows but, that's part of moving into a future forward-thinking process.

[Marc]

If you can provide more information on what you have added, and where. And also what you have used on the front end

[2TonWaffle]

Of course, for the allow embed settings I have the following setup.

And for the link I'm using from Captivate is the following. https://player.captivate.fm/episode/98c8beb9-f160-4ac2-91a1-a94538c67e7e/

[Marc]

I would need to know step by step how you are posting this, as its working correctly on this end. You should be posting a link, and selecting the iframe option

[2TonWaffle]

Ok, the embeds for the Captivate links are going through just as they should be. I was pasting the URL into the link dropdown but wasn't seeing the globe icon that is now showing up. Not sure if I was giving it enough time but it does work now. The only issue is coming from the Peertube side as it's just displaying a white block.

[Matt Finger]

58 minutes ago, 2TonWaffle said:

Ok, the embeds for the Captivate links are going through just as they should be. I was pasting the URL into the link dropdown but wasn't seeing the globe icon that is now showing up. Not sure if I was giving it enough time but it does work now.

 

Yeah, so in case anyone else is confused, the custom iframe feature starts from the link panel directly. Also worth noting, for security purposes, beyond whitelisting the domain, the url needs to use HTTPS protocol to work

[All Astronauts]

Don't forget Editor Permissions, last option (default is Never):

The long-term dream for this would just be pasting a url into the editor directly and if the domain matches a white-list entry getting the globe option right there in the editor.

 

[Omri Amos]

40 minutes ago, All Astronauts said:

The long-term dream for this would just be pasting a url into the editor directly and if the domain matches a white-list entry getting the globe option right there in the editor.

 

wait, isn't this how embeding works already for years? (at least on V4)

[2TonWaffle]

14 minutes ago, Omri Amos said:

wait, isn't this how embeding works already for years? (at least on V4)

My understanding was that the process in v4 was more involved with adding the iframe HTML within the settings, this new process is much more streamlined by just adding the whitelisted domain without having to do much more.

 

[All Astronauts]

Some embeds are managed internally in Invision Community with the Parser code; this is necessary if the actual embed requires "massaging" or has additional features that can be played with (YouTube shorts is annoying, X/Twitter you can play with light/dark on the fly when it comes in, some try to insert JS libraries which won't survive the content parse clean-up unless it is set explicitly as an iframe, and so on.)

Oembeds will still work if you only have the domain whitelisted and you paste a link into the editor or use the link button, but you get the generic box with the generic site image and link instead of what is actually being provided.

The globe button is what forces a "clean" iframe on the provided link and lets it all through as-is.

If, using the above example, IPS inserted the captivate.fm stuff directly in the Parser code for direct management, just pasting the link into the editor would deal with it (after they manage how to allow it to insert), just like YouTube and all the rest. That would mean direct and constant upkeep on IPS's part and there are a lot of oembed services and sites people will clamor for inclusion.

Chef's kiss perfect would be, as I stated above, pasting a link, and if it is on the whitelist, just giving us a globe/iframe button right there on the link rather than having to explicitly use the link button on the editor itself (I'm thinking of how I'll have to train users to use the link for iframe control after they have gotten so used to just plastering in You Tube and so on directly into the content editor)

Current parser loadout for directly supported oembed services (the ones you just paste the link into the editor and it just works):

		$services = array(
			'youtube.com'					=> array( 'https://www.youtube.com/oembed', static::EMBED_VIDEO ),
			'm.youtube.com'					=> array( 'https://www.youtube.com/oembed', static::EMBED_VIDEO ),
			'youtu.be'						=> array( 'https://www.youtube.com/oembed', static::EMBED_VIDEO ),
			'flickr.com'					=> array( 'https://www.flickr.com/services/oembed/', static::EMBED_IMAGE ),
			'flic.kr'						=> array( 'https://www.flickr.com/services/oembed/', static::EMBED_IMAGE ),
			'hulu.com'						=> array( 'https://www.hulu.com/api/oembed.json', static::EMBED_VIDEO ),
			'vimeo.com'						=> array( 'https://vimeo.com/api/oembed.json', static::EMBED_VIDEO ),
			'collegehumor.com'				=> array( 'https://www.collegehumor.com/oembed.json', static::EMBED_VIDEO ),
			'twitter.com'					=> array( 'https://publish.twitter.com/oembed', static::EMBED_TWEET ),
			'mobile.twitter.com'			=> array( 'https://publish.twitter.com/oembed', static::EMBED_TWEET ),
			'x.com' 						=> array( 'https://publish.x.com/oembed', static::EMBED_TWEET ),
			'x.twitter.com' 				=> array( 'https://publish.x.com/oembed', static::EMBED_TWEET ),
			'soundcloud.com'				=> array( 'https://soundcloud.com/oembed', static::EMBED_VIDEO ),
			'open.spotify.com'				=> array( 'https://embed.spotify.com/oembed', static::EMBED_VIDEO ),
			'play.spotify.com'				=> array( 'https://embed.spotify.com/oembed', static::EMBED_VIDEO ),
			'ted.com'						=> array( 'https://www.ted.com/services/v1/oembed', static::EMBED_VIDEO ),
			'vine.co'						=> array( 'https://vine.co/oembed.json', static::EMBED_VIDEO ),
			'dailymotion.com'				=> array( 'https://www.dailymotion.com/services/oembed', static::EMBED_VIDEO ),
			'dai.ly'						=> array( 'https://www.dailymotion.com/services/oembed', static::EMBED_VIDEO ),
			'coub.com'						=> array( 'https://coub.com/api/oembed.json', static::EMBED_VIDEO ),
			'*.deviantart.com'				=> array( 'https://backend.deviantart.com/oembed', static::EMBED_IMAGE ),
			'docs.com'						=> array( 'https://docs.com/api/oembed', static::EMBED_LINK ),
			'funnyordie.com'				=> array( 'https://www.funnyordie.com/oembed.json', static::EMBED_VIDEO ),
			'gettyimages.com'				=> array( 'https://embed.gettyimages.com/oembed', static::EMBED_IMAGE ),
			'ifixit.com'					=> array( 'https://www.ifixit.com/Embed', static::EMBED_LINK ),
			'kickstarter.com'				=> array( 'https://www.kickstarter.com/services/oembed', static::EMBED_LINK ),
			'meetup.com'					=> array( 'https://api.meetup.com/oembed', static::EMBED_LINK ),
			'mixcloud.com'					=> array( 'https://www.mixcloud.com/oembed/', static::EMBED_VIDEO ),
			'mix.office.com'				=> array( 'https://mix.office.com/oembed', static::EMBED_VIDEO ),
			'reddit.com'					=> array( 'https://www.reddit.com/oembed', static::EMBED_LINK ),
			'reverbnation.com'				=> array( 'https://www.reverbnation.com/oembed', static::EMBED_VIDEO ),
			'screencast.com'				=> array( 'https://api.screencast.com/external/oembed', static::EMBED_IMAGE ),
			'slideshare.net'				=> array( 'https://www.slideshare.net/api/oembed/2', static::EMBED_VIDEO ),
			'*.smugmug.com'					=> array( 'https://api.smugmug.com/services/oembed', static::EMBED_IMAGE ),
			'ustream.tv'					=> array( 'https://www.ustream.tv/oembed', static::EMBED_VIDEO ),
			'*.wistia.com'					=> array( 'https://fast.wistia.com/oembed', static::EMBED_VIDEO ),
			'*.wi.st'						=> array( 'https://fast.wistia.com/oembed', static::EMBED_VIDEO ),
			'tiktok.com'					=> array( 'https://www.tiktok.com/oembed', static::EMBED_VIDEO ),
			'm.tiktok.com'					=> array( 'https://www.tiktok.com/oembed', static::EMBED_VIDEO ),
			'vm.tiktok.com'					=> array( 'https://www.tiktok.com/oembed', static::EMBED_VIDEO ),
		);

 

[Matt Finger]

33 minutes ago, All Astronauts said:

I'm thinking of how I'll have to train users to use the link for iframe control after they have gotten so used to just plastering in You Tube and so on directly into the content editor

I'm not sure what you mean as v5 will still embed youtube and the like immediately when you paste a link as Youtube runs on the OEmbed system. Additionally, like you mentioned, when enabled OG Embeds are used to replace a URL with a preview automatically.

The only case where you need the link panel button is when you are creating a raw iframe... e.g. a basic <iframe> tag that just has a src and no wrappers or anything. The reason we didn't add an auto-embed feature for that type of iframe is it could catch a lot of links, and doesn't really reflect the intent behind pasting a URL. It's also a feature that is not really intended for regular members to use.