Issue with the release of the embedded Twitter widget

Question

I am trying to add a Twitter widget to my site, but I have a problem with the height of the widget. Sometimes it works, in other cases it ignores the height value and stretches the page, so there is a lot of free space at the bottom (stretches the widget to 7847px). I tried adding height to the code and setting the height of the DIV, but it still does it. This is the code I use from Twitter

<a class="twitter-timeline" data-chrome="nofooter noheader noborders noscrollbar transparent" height='350' data-tweet-limit="5" data-dnt="true" href="https://twitter.com/Talk_AVFC/villa-players" data-widget-id="362602509207994368">Tweets from @Talk_AVFC/villa-players</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

Does anyone have this problem and you know about it?

Demo here http://richardawarner.co.uk/astonvillastuff/ (on the Twitter tab)

Answer 1

The maximum width and height can be set by adding data attributes to the link:

 <a class="twitter-timeline" data-width="350" .... > 

Set the height of the displayed widget by overriding the value stored using the widget ID. Must have more than 200 pixels.

Note: the height parameter is not applied when the tweet-limit parameter is specified

https://dev.twitter.com/web/embedded-timelines/parameters

Answer 2

Customize .twitter-timeline class in CSS and declare its height

 .twitter-timeline { height: 350px !important; }