Forum Discussion
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!
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>
where can I find the source code of the embed web video?
Hello Oliver,
If you right-click on a web object in a Storyline 360 project, you'll see the option to "Change Embed Code".
Doing this will show you the source code for the embedded video on the slide. You can refer to this article for more information on managing embedded content in a Storyline 360 project.
Let me know if you have any questions!
Mykal, you are a genius! That's it. I've also tested with resizing and it works great. Thank you!
Just wanted to add my thanks on this one, Mykal, as I was having a similar issue with a TED talk. I have just used your fix and it works a treat!
I love this community!!!
Remember that the player takes up valuable visual real estate. Whenever possible for videos use a link that takes the user directly to the video in question.
The example has a size of 720 * 405. That's a very small video by today standards.
