HTML Stripping on Export


#1

Why does StackEdit strip part of my HTML when I export to HTML. I’ve tried all three of the existing HTML formats and for each one the following HTML code

<div style="position:relative;height:0;padding-bottom:56.25%;overflow:hidden"><iframe src="https://www.youtube.com/embed/j7jXUo25XB4?ecver=2" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;top:0;left:0" allowfullscreen></iframe></div>

ends up in the export as

<div><iframe src="https://www.youtube.com/embed/j7jXUo25XB4?ecver=2" width="640" height="360" allowfullscreen=""></iframe></div>

I want the videos embedded in the HTML to be auto resizing and the initial code works. I just have to figure out how to get it out of get it out of StackEdit. Any help greatly appreciated.

I also looked in the “Configure Templates” code though that seems a bit beyond me.


#2

That’s because of the HTML Sanitizer that prevents from XSS attacks. You can overcome that by replacing style attributes with a CSS class and adding a <style> sheet to your template.


#3

I sincerely appreciate your response and I’ve been searching without success for a reference that might provide me with a clue as to how to do this in some time period than the rest of my life. Sorry, I’m just a user rather than a programmer so if you could provide me a pointer to a reference as to how to get started accomplishing your response I’d be most appreciative.


#4

Ok, just replace the code above with this:

<div class="youtube-container"><iframe src="https://www.youtube.com/embed/j7jXUo25XB4?ecver=2" width="640" height="360" class="youtube" allowfullscreen></iframe></div>

Then make a copy of the styled HTML template and add this inside the <head>:

  <style>
  	.youtube-container {
  		position:relative;
  		height:0;
  		padding-bottom:56.25%;
  		overflow:hidden;
  	}
  	
  	.youtube {
  		position:absolute;
  		width:100%;
  		height:100%;
  		top:0;
  		left:0;
  		border: 0;
  	}
  </style>

You’ve just replaced the style attributes with some CSS classes.
Hope it helps.

Cheers!


#5

It works marvelously. What a marvelous lesson in leaning greatly appreciated. Thank you!


#6

Is there any way I can do something similar to use HTML5 video tags to embed videos.
I’ve tried variations on the above but tags are always stripped out.

Is there an alternative way to include videos that are not on YouTube or Google Drive?

Thanks!


#7

Hi, I came across this topic, trying to figure out an issue:
I’m trying to add a custom attribute to iframe tag, like <iframe realsrc="..."> but it’s stripped out when I export/publish HTML. Even a legit attribute like ‘name’ is omitted as well .
Is there anything that can be done to enable such behavior?


#8

I’m also facing this problem, but I need the styles to be assigned within the HTML because I’m using them to define scoped CSS variables.

<img src="/images/image.jpg" alt="" class="slidescroll__slide-img" style=" --img-size-portrait: 1; --img-size-medium: 1; --img-size-landscape: 1; --img-position-portrait: 50% 61%; --img-position-medium: 50% 61%; --img-position-landscape: 50% 61%">

I realize that I could define a separate class for each image (or use some other CSS selector) but that’s a pretty convoluted workflow for setting attributes that are specific one single tag. Is there no way to get the style attribute to render?


#9

It’s worth mentioning that Sanitizer also strips out any data -attributes you might be using