更改非WP网站上的Twitter窗口小部件高度（新API？）

Question

I've tried searching these forums for an update on setting the widget height for the embedded Twitter widget ( https://support.twitter.com/articles/20170071 ). You can designate a height in the setting fields on Twitter (they have a form to create a semi-custom widget), but it doesn't go into effect when I add it to my HTML. Most of the forum questions on here are from 2013 (a different code from Twitter?) and don't seem to work for me.

I tried this JSFiddle code:

http:// jsfiddle.net /mandykiwi/ NbF7C/

but setting the height to !important in CSS didn't do anything for me. I may have done it wrong. I entered this into my styles.css sheet, as per the jsfiddle code:

.timeline .stream {
   height: 600px!important;
}

My HTML came from Twitter, plus some of the code they provided for further customization:

<a class="twitter-timeline" href="https://twitter.com/KGShowroom" data-widget-id="631599342176989184" data-chrome="nofooter transparent noheader noborders noscrollbar" height="600">Tweets by @KGShowroom</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>

(I've also tried it without the addition to the stylesheet.)

Another forum answer here on Stackoverflow says that the height is now set within the JS code that Twitter generates ( HTML/CSS for Twitter widget width ) but I'm not sure what that means; can it be changed?

I am not exactly sure what size I need it to be, but I know I need it larger than it is. I'm guessing 100% in height so that it can be responsive, but even doing it in px, it isn't changing.

This is the site I'm trying to work on this with: http://kgshowroom.com/test/index.html

Answer 1

iframe.twitter-timeline {

    min-height:600px!important;
}

http://jsfiddle.net/NbF7C/12/ They set min-height , so, just override it.

Answer 2

if your only need is to set a fixed height to the iframe containing the feed, you need to substitute

• height="600" with
• data-height="600"

in the a-html tag.

See official configuration site, here: https://publish.twitter.com/# , and adapt your code to the result.