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

スポンサードリンク

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

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

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

 

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

 

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

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

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

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

iframeのサイズを制限するとTwitterの埋め込みに影響がでる

ちなみにTwitterの埋め込みが見切れる現象はこちら。

iframeに指定した縦サイズにまでしか表示されず、画像がが見切れちゃってますね。

 

そして対応がこちら

Twitterの埋め込みが見切れる現象の対応

.twitter-tweet {
 max-height: 9999px !important;
}

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

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

ちなみにこれ

.twitter-tweet {
 max-height: 100% !important;
}

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

他にも

.twitter-tweet iframe{
 max-height: 100% !important;
}

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

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

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

この記事をサイトに埋め込む
スポンサードリンク
この記事をシェアする
RSSリーダーに登録する

 RSSリーダーで購読する

Facebookの反応