NFTをがっつり実践してざっくり解説していくブログbyどらたん

シリウスでyoutube動画をスマホ最適化表示させる方法

シリウスで作成したサイトでyoutube動画を埋め込む際、
そのまま埋め込むとスマホ画面ではみ出してしまうので、
それを綺麗に表示させる方法です。

 

シリウスでyoutube動画を埋め込み、
iphoneなどで確認すると動画がはみ出して幅がブレブレになってしまいます。

これって結構スクロールする際にストレスなので、
スマホで綺麗に表示させることはSEO上でも大切なのではないかと思います。

埋め込みタグでスマホではみ出さないサイズにするという手もありますが、
それだとPC表示が小さくなってしまい、せっかくのインパクトも薄れてしまうので、

PCで元のサイズを表示させつつ、スマホで画面いっぱいに最適化させて表示させる方法をご紹介。

これを調べると結構ややこしく書いてるところが多いですが、
絶対僕がやってる方法が一番簡単だと思います。

目次

やり方

やり方は以下のタグをコピペして黄色の部分を変えるだけです。

[deco_bg image=”paper1″ width=””]

<pcc>
<iframe width="560" height="315" src="https://www.youtube.com/embed/4Bh1nm7Ir8c" frameborder="0" allowfullscreen></iframe>
</pcc>
<ipc>
<iframe width="100%" height="315" src="https://www.youtube.com/embed/4Bh1nm7Ir8c" frameborder="0" allowfullscreen></iframe>
</ipc>

[/deco_bg]

この黄色の部分はyoutubeページで埋め込みコードを表示させた際のこの部分。

2016y05m31d_170212072

埋め込みたい動画のこの部分を、
上のタグの黄色い部分に張り替えるだけでOKです。

ちなみに数字の部分をいじればサイズも変えられます。

 

これだけでPC・スマホともに綺麗に表示されます。

youtube動画を埋め込む際は参考にしてください。