≪SIRIUS≫スマホ表示時にyoutubeを画面内に収める方法!

こんにちは、ぽるです。

今回はSIRIUSで作ったサイトに、youtubeを入れると
スマホで見た時に画面に収まりきれない(はみ出してしまう)を、
解消する方法を解説していきたいと思います。

 

ぽるもスマホで見てビックリしたんですが、
通常スマホにyoutubeを入れるとこんな感じで、
画面の幅が足りなくで動画が切れていると思います。

 

WS000020

 

 

この状態だとスマホを横にしないとyoutubeを視聴できませんが、
見ている人にとっては、面倒でしょうがないですよね。

そんなyoutubeを簡単に画面内に収めることができるので、
是非活用してみてください。

 

youtubeを収める手順

 

 

 

WS000023

 

これはyoutubeの共有から取ってきた動画ですが、
通常であればこのようにシリウスに貼りつけているだけだと思います。

 

実はここで『右クリック』をするだけで、
PCサイトとスマホサイトとで見た時に、
どう反映するかを変えれるボタンがあるので、それを利用します。

 

手順は『マウスの右クリック』『タグ挿入』PCのみで表示(pcc)or』を利用します。

 

今回取ったyoutubeの動画をこれで囲みます。

WS000024

 

 

この様に取得してきたyoutubeの動画を囲みます。
こんな感じですね。

 

≪PCのみで囲んだ場合≫
<pcc>
<iframe width=”420″ height=”315″ src=”youtubeの動画URL” frameborder=”0″ allowfullscreen></iframe>
</pcc>

≪iPhoneのみで囲んだ場合≫
<ipc>
<iframe width=”420″ height=”315″ src=”youtubeの動画URL” frameborder=”0″ allowfullscreen></iframe>
</ipc>

 

これでPCやスマホでyoutubeを振り分けれるのですが、
最後にやることが一つあります。

 

WS000025

 

 

iPhoneのみ表示させる方だけのタグを『420』から『100%』に書き換えます。

 

≪今まで≫
<ipc>
<iframe width=”420” height=”315″ src=”youtubeの動画URL” frameborder=”0″ allowfullscreen></iframe>
</ipc>

≪書き換える≫
<ipc>
<iframe width=”100%” height=”315″ src=”youtubeの動画URL” frameborder=”0″ allowfullscreen></iframe>
</ipc>

 

これでiPhoneやスマホでサイトを覗いても
こんな感じで、画面内に収まる様に表示されます。

 

WS000021

 

 

ちょっと面倒ですが、
訪問者が見やすいサイトを作る為には不可欠な作業になるので、
ぜひ活用して、訪問者の滞在時間を伸ばしてくださいね^^

 

コメントを残す