Embedded Twitter Widget Height issue

Question

I am trying to add the Twitter widget to my website but I am having a problem with the height of the widget. Sometimes it works, other times it ignores the height value and stretches the page so that there is a lot of empty space at the bottom (stretches the widget to 7847px). I have tried adding height within the code and setting the DIV height but it still does it. This is the code I am using 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>

Anybody have this issue and know a fix?

Demo of issue is 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 a displayed widget, overriding the value stored with the widget ID. Must be greater than 200 pixels.

Note: the height parameter does not apply when a tweet-limit parameter is specified

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

Answer 2

Target the .twitter-timeline class in CSS and declare its height

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