Mailgun and embedded content (images, video, audio)

[AmbientArtstyles]

Hey all, I am about to throw in the towel with regards to my issue but am hoping for any advice or suggestions before doing so .

Backstory
I use HTML to embed and format YouTube videos, SoundCloud audio clips, images/gifs for my audio blog’s articles and newsletters. The videos and audio clips are often embedded via <iframe>. I have found this allows for more flexible formatting like word wrapping and easy orientation and sizing in-line with text. I am not sure of other/potentially better options.

The Issue
Mailgun strips out a lot of this content, including images hosted on the site and embedded using <figure> which results in oddly formatted emails with missing content. The emails often look like a mess.

Mailgun’s response
I submitted a ticket to Mailgun about this and they told me to refer to ‘Sending Inline Images’ in the provided documentation: this link - (image attached below). I am relatively new to webdev and so it could be that I just don’t understand what I should be doing. I feel that this response doesn’t really resolve my issue, and that I have hit a dead end with Mailgun support.

Seeking Suggestions & Question

• I read that many email clients refuse remote content (especially when embedded via iframe) because it can be a safety concern…? This makes me feel as though I should accept that my newsletters will have shoddy formatting and just tell my e-mail readers to “click this link and read from the website”. I would like to adhere to some kind of Newsletter ‘best practice’, but not sure where to go from here.

• Does anyone have an idea for how I can include this kind of content and formatting in my newsletters which go out via Mailgun?

[Cathy_Sarisky]

Hey @AmbientArtstyles,

I’m not sure if Mailgun should have been your first place to ask for help on this one. If you’re using Ghost to generate the outbound emails, you’re rather dependent on what Ghost is sending over to Mailgun. If you’re going to have Ghost send your emails, you’re limited by what Ghost does. While you /can/ include HTML in an HTML card, HTML for email is not the same as HTML for websites.

Having said that, yes, iframes and embeds generally don’t work well in email. Mail clients don’t run javascript, they don’t reliably load iframes, or even images. They don’t even load CSS or fonts, most of the time. They’re also about two decades behind where browsers are, in terms of standards compliance. (Sending a well-formatted email means converting everything into tables and inlining all the styles. Seriously.) There’s a reason pretty much every piece of bulk email I receive starts with a “View this email in your browser” link – email is tough.

A workaround for embeds and javascript not working is to make a “title screen” image for your video, and superimpose what looks like a play button. Link the image to the source (i.e. YouTube), or to your post. No guarantee the image will get loaded in the email client, but odds are much higher than an embedded player. It’ll look right, and clicking will result in (~approximately~) the expected behavior. Another option is to just link the media or post. Introduce the media, then provide a “click here to see it” type link.

If I were committed to having users see the preview card for each piece of media, I’d make those ‘fake’ previews, hit “publish and send”, then edit the post to include the actual embeds I wanted on the website version. Or you could create the post, then use the duplicate button in the admin panel to create a copy, that you could edit and email.

[AmbientArtstyles]

Thank you soooooo much for this information! I follow what you’re saying and hugely appreciate the response. This gives me some to think on. I will likely just try to push the ‘view this email in your browser’ option. Thanks again!