何でもありのカオスなブログ

Vineの動画を埋め込んだ時にスマホではみ出ないようにする方法

   

Vine アイコン

みっともないから修正しよ?

どもども、ひろ@tekito-daro)です。

Vineをブログに埋め込む方法書いたけど、サイズを600pxとかにするとスマホで見た時はみ出ちゃうんですよねー。

それはアカンやろ!修正だ!ってことでパパっと修正しました。CSSいじるだけなんですぐ出来ちゃいますよー(・∀・)v

SPONSORED LINK

はみ出し禁止!スマホサイズに直しましょう!

はみ出してるとかスマートじゃないよね。スマホだけに…。

そんじゃさっそく直し方を。とりあえずVineの埋め込みコードを見てみると・・・

<iframe class=”vine-embed” src=”https://vine.co/v/MLIH7nUaW0M/embed/simple” width=”600″ height=”600″ frameborder=”0″></iframe><script async src=”//platform.vine.co/static/scripts/embed.js” charset=”utf-8″></script>

ほほぅ、こ~んなとこにclassがついてるじゃないですかー。これさえわかれば後はカーンターンよっ!

1.自分の使ってるテーマのstyle.cssを開く

難しいことやらないから別にWordPressからCSSに直接書いてもOKかと。不安な人はバックアップとればOK!

2.CSSに少し書いておしまい!

クラスが指定されてるのでちょこちょこっと書いておしまいです!

iframe.vine-embed {
    max-width: 100%;
    max-height: auto;
}

 
自分はこんな感じに書いてますねー。iframeに指定してもいいんだけど、前にやったらTwitterを埋め込んだ時に

Twitter 埋め込み

こんなことになってしまったのでやめましたw Twitterを埋め込む予定のある人は注意してね☆(ゝω・)v

ひとこと

はみ出してるとカッコ悪い以前に見づらいからね。スマホユーザー増えてるし注意しまそう(・∀・)

あ、あとなぜかChromeでVine開いたら音が鳴らなかったんですが誰か原因分かる人教えてくださいorz スマホとFirefoxは大丈夫なんだけどなー・3・

そんじゃまた(・∀・)ノシ

 - WordPress