top3

YouTube動画をブログに埋め込みスマホではみ出るサイズを防ぐ方法

Pocket

youtube

文章の説明だけではなく、画像や動画を盛り込むことで、より魅力的なコンテンツを作成することができますよね。

YouTubeの動画も簡単にブログ内に埋め込むことができます。



「共有」「埋め込みコード」のどちらかを選択し、指定のコードをブログにコピペすることでそれが可能になります。

c4e71d7413709de8b08089435a739108
                

b3451797f8773c27ff10e76749cfee99


ただ、動画によって(ブログやテンプレートによって)はスマホでみたときに、このように画面からはみ出てしまうことがあります。

IMG_1823


これではせっかく良いコンテンツを作れたとしても読者は動画を見る気にはならないですよね。



これを防ぐためには、貼り付けたいコードを以下のタグで囲みます。

<div class="v-wrap al-c m30-b">貼り付けたいコード</div>


                

89ab9e53b5366717437f2d31dc562a3a


そうすると・・・

IMG_1824
ご覧のようにスマホでも最適化することができました。



僕の場合はこのブログだとスマホ最適化ができませんでしたが、So-netブログでは自動的にサイズが縮まりました。

ブログ内に動画を埋め込んでいる人は、一度スマホではどのように表示されているのかをチェックしてみるといいかもしれませんね。


コメントを残す

サブコンテンツ