Embedded video width?

[Hon]

Hi! We are embedding Twitter videos with code like this:

<blockquote class="twitter-video"><a href="https://twitter.com/twitter/status/55555555555555/video/1"></blockquote>
<script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>

Video plays and works great. BUT there are two problems. The video is always 500px wide no matter what, and worse, it’s impossible to center it.

The widgets.js creates an iframe with 100% width, and then there’s an iframe with static width of 500 inside there, which is left-aligned. So basically it looks awful

I was able to work around it by statically setting the parent element to 500px but that seems kind of hacky since nowhere in the docs does it say it will be 500px and I’m just guessing that all videos will have that width.

Any advice? Thanks!!

[niall]

I was able to set a max-width of a parent element, which was inherited by the widget at runtime.
http://jsfiddle.net/niallkennedy/90cnw0x7/

[Hon]

Right… actually a max-width works for me if I want to make the video smaller (like on mobile).

But the problem is, in the No Constraints div, it’s left-aligned. There is no way to place the video in an element with 100% width and center it as far as I can tell.

I ended up working around it by setting a width of 500px and setting margin: 0 auto, but ideally I should have been able to leave it at 100% width and use margin: 0 auto and have it work. I’m unclear why the iframe takes up the full width but the child video does not. Thank you!

[niall]