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!