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!