WebサイトにTwitterの投稿を埋め込む際に、横幅を調節する
やりたいこと
TwitterのWidgetでは幅が500ピクセルに固定されていますが、これをレスポンシブのサイトに埋め込むと酷くダサいことになるので、横幅をあわせたい。
実装
<script> $(function(){ var setWidth = function() { $('twitter-widget.twitter-tweet').each(function(index, element) { element.style.width = "100%"; element.style.maxWidth = "100%"; var tweet = element.shadowRoot.querySelector(".EmbeddedTweet"); tweet.style.width = "100%"; tweet.style.maxWidth = "100%"; }); }; setInterval(function() { setWidth(); }, 1000); }); </script>
ポイント
JavaScriptでshadowRoot
の要素を弄る。