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.

Embedded TED video

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:

Published slide with TED video

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!

2 Replies
Mykal Duffy

Check to see if this is what you were looking for,

https://360.articulate.com/review/content/243e03d1-76a3-44f8-91fc-e90312689e30/review

 

and if it is, this was how I changed the embed code from the one you posted (note particularly the removal of the frameborder and the insertion of the seamless attribute):

 

<iframe src="https://embed.ted.com/talks/lang/en/chieh_huang_confessions_of_a_recovering_micromanager" width="720" height="405" style="position:absolute;left:0;top:0;width:720;height:405" seamless="" scrolling="no" allowfullscreen=""></iframe>