Embedding TED Talk videos and editing the embed code

I am trying to embed TED Talk videos into our modules but I'm having trouble with the sizing and placement. Even though the video looks full size when I first insert it, it anchors to the top left corner with a white border on the right and bottom edge. I'm using a 720 x 405 story size, not locked.

When published, the video is much smaller than it appears in the slide view and is off center due to the border. This is particularly an issue if I am using a decorative image around it (ie, screen or TV image).

The published slide:

https://360.articulate.com/review/content/c424d1af-75cd-4d74-9e30-fedb04eee900/review

I have found this with multiple videos from the TED website.

My steps: Insert Tab -> Video -> Video from Website and then I paste in the embed code from the TED website. 

In this case, the embed code looks like:

<div style="max-width:854px"><div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="https://embed.ted.com/talks/lang/en/chieh_huang_confessions_of_a_recovering_micromanager" width="854" height="480" style="position:absolute;left:0;top:0;width:100%;height:100%" frameborder="0" scrolling="no" allowfullscreen></iframe></div></div>

I think it has something to do with the "padding" in the first line, but I've tried removing and changing that, without any result. I've also tried deleting and/or changing the "position:absolute;left:0;top0" but again, no luck (didn't play when I deleted it altogether).

I clearly don't know enough about the embed code here so would be really grateful if anyone can point out what I'm doing wrong or should change!