iframeのサイズ指定を行った場合にTwitterの埋め込みが見切れる現象の対応

Youtubeなどの動画（iframe)を埋め込んだ記事をモバイルテーマで閲覧した場合、横サイズは画面サイズに合わせて調整されるが、縦サイズはPCテーマで指定した縦サイズのままとなり、下記のような見た目になってしまうことってありませんか？

Twitterの埋め込みが見切れる原因

気にしない人は気にしないのかもしれないけど、なんかこれが個人的には気に入らなくて、遥か昔に取った対応がこちら

/* youtubeのサイズ調整 */
iframe {
　max-height: 300px;
}

まぁなんというか・・・突貫工事というか臭いものには蓋をしろ的というかいい加減な対応でした。

ただ、これ以外で対応しようとすると、埋め込みの度に自前のclassを挿入したりと色々面倒なんですよね・・・だから許して欲しいんですｗ

ただ、これだと１つ問題があるんですよね・・・それがTwitterの「ツイート埋め込み」なんです、これもiframeなのでこれだと強制的に縦幅がカットされてしまう場合があるんです。

そこで色々やった結果下記のおまじないでなんとかなることがわかったのでメモっておきます。

そして対応がこちら

なんでしょうね、この恥ずかしいソースはｗ

まぁでも取り敢えずこれをCSSに追記してみてください、一応直りますのでｗ

ちなみにこれ

これだと上手く行かないんですよね。

他にも

これとかもやってみたけど、この場合だと変化はあるものの中途半端に途中まで表示されるだけでダメなんです。

で、さっぱりわからんので直値で適当に入れてみたら全部表示されたので今のところはこれで様子見しています。

色々いい加減な対応なのでご利用は自己責任でどうぞｗ