Twitterの埋め込みタイムラインがどうやってもパーセント指定でサイズを変えられなかった。

By @mun7/20/2017programming

変えられなかったので、力技で解決した。
もっとうまい解決方法ないの?
きっとあるんでしょ?
これで親要素の40%のHeight、90%のWidthになってる。
data-widthとdata-haightにピクセルで指定してやらないといけないのがやっかい。

  • JavaScript
$(window).load(function(){
    responsiveTwitterWidgetSize('#twitter');
});

function responsiveTwitterWidgetSize(parent_element){
    var parent_height = $(parent_element).height();
    var parent_width = $(parent_element).width();
    
    var widget_height = parseInt(parent_height) * 0.4; //任意の数字でかける、今回は40%にしたかった
    var widget_width = parseInt(parent_width) * 0.9; //任意の数字でかける、今回は90%
    var twiter_tag = '<div class="twitter-embed">'
                + '<a class="twitter-timeline" data-width="'+widget_width+'" data-height="'+widget_height+'" 
                + 'href="https://twitter.com/TwitterDev>Tweets by TwitterDev</a>'
                + '<script async src="//platform.twitter.com/widgets.js" charset="utf-8">'
                + '</script>'
                + '</div>'
    $(parent_element).append(twiter_tag);
}
  • Html
<div id="twitter">
</div>
3

comments