Forcing embedded tweet to 100% width

Since May 2016 Twitter use an other embed HTML. It looks like this. They droped iFrame integration.

<twitterwidget class="twitter-tweet twitter-tweet-rendered" id="twitter-widget-1"
               style="position: static; visibility: visible; display: block; max-width: 100%; width: 500px; min-width: 220px; margin-top: 10px; margin-bottom: 10px;"
               data-tweet-id="732567624345915393">
    <div data-twitter-event-id="1" class="SandboxRoot env-bp-350" style="position: relative;"> 
        ...
    </div>
</twitterwidget>

In the DOM you will find an Element called #shadow-root after twitterwidget open tag (check out in Chrome inspector). From now it is possible to manipulate all Twitter Ebends by css and pseudo element shadow.

Example for width:

twitterwidget::shadow .EmbeddedTweet {
    width: 700px;
    max-width: 960px;
}

Example - https://jsfiddle.net/86dc9y5t/

Do not use on product pages: - https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

Simply set the width setting the width of the widget itself.

Check inspecting in the console what is the id of the widget container.

#twitter-widget-0{ width:100%; }

Cory, this is not possible using Twitter's provided embed. Well, it's possible to some extent, but only up to 520px. See https://dev.twitter.com/docs/embedded-timelines.

However, you can add width="2000" like this `

<a class="twitter-timeline" width="2000" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>

` And then adjust your CSS. It's not the best solution, though.

there's an old post that might be of use for you, don't know if still works, but worth a view, check it out at http://kovshenin.com/2012/quick-tip-how-to-make-tweet-embeds-responsive/