Twitterウィジェットの最大幅を520px以上に設定する

kimizuka.hatenablog.com

Twitterウィジェットを制作する際に、width、heightを渡せばその大きさになるのですが、限界もある模様です。

https://dev.twitter.com/ja/web/embedded-timelines/parametersdev.twitter.com

width

180px 〜 520px

iframeのmin-widthが180pxに、
iframe内のdiv.timeline-Widgetにmax-widthが520pxに設定されているため、上記の値が限界になります。
なので、iframeの幅を520pxよりも大きく設定しても期待通りのレイアウトになりません。

いちかばちか、

// ウィジェットのIDを指定
document.getElementById("twitter-widget-0").contentDocument.querySelector(".timeline-Widget").style["max-width"] = "none";

的な感じでmax-widthを上書きしてみたのですが、うまくいく時とうまくいかない時がありました。
（クロスドメインになるのでうまくいかないと思っていたのですが、サーバ側で許可されているのかうまく書き換えられるときもありました）

widthの上限を突破するデモ

jsrun.it

JavaScript

(function(win, doc) {

  "use strict";

  var timer = setInterval(function() {
    var timeline = doc.getElementById("twitter-widget-0");
      
    if (timeline) {
      if (timeline.contentDocument.querySelector(".timeline-Widget")) {
        clearInterval(timer);
        timeline.contentDocument.querySelector(".timeline-Widget").style["max-width"] = "none";
      }
    }

  }, 100);
})(this, document);

heihgt

200px 〜

iframeのmin-heightが200pxに設定されているので200pxが下限になります。
こちらは簡単に上掛けますが、特にメリットがあるとは思えません。