JSFiddle - React, Tailwind, and code Playground

HTML

<div class="movie-wrapper">
  <!-- ここにウィジェットのリンク -->
  <blockquote class="twitter-video" lang="ja"><p lang="ja" dir="ltr">【速報】とっても可愛いワンちゃん現る&#10;【速報】とっても可愛いワンちゃん現る&#10;【速報】とっても可愛いワンちゃん現る&#10;【速報】とっても可愛いワンちゃん現る&#10;<a href="https://twitter.com/hashtag/%E5%8F%AF%E6%84%9B%E3%81%84%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%9F%E3%82%89RT?src=hash">#可愛いと思ったらRT</a>&#10;<a href="http://t.co/fp0j7sstg9">pic.twitter.com/fp0j7sstg9</a></p>&mdash; 大人気と話題の動画！ (@sittetokusuru_) <a href="https://twitter.com/sittetokusuru_/status/648845762483372032">2015, 9月 29</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

</div>

CSS

.movie-wrapper {
  position: relative;
  height: 0;
  padding: 0 0 56.25%;　/*要変更*/
  width: 100%;
  overflow: hidden;
}

.movie-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript

/*
cssのpadding: 0 0 56.25%は、
高さ0にした要素にpadding-bottomに対して比率を与えることで高さを確保するというようなものです。
56.25%は、16:9の比率です。

横が100%の時に高さが何%であるかしいう計算です。

ここから、横と同じ高さを縦に入れるのであれば、56.25%を100%に変更すれば良いという事になります。
あくまで横に対する縦の比率なので、スマホの縦横の向きでその比率を変更する必要があれば、メディアクエリでpaddingを変えればイケると思います
*/