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

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

 

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

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

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

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

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

やり方

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

<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>

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

2016y05m31d_170212072

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

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

 

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

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

 

いつも応援ありがとうございます(^-^)



気になったことやもっと詳しく知りたいことがあれば今すぐ聞いてくださいね。

LINEからのお問い合わせの場合は、
スマホでボタンをクリックor友達追加から”@doratan”で検索
で出てくるので、トーク返信で送ってください。
※検索する場合は”@”が抜けてると出てきません。
0
'stats.label.addfriend' (MISSING TRANSLATION)

コメントを残す