こんにちは、ぽるです。
今回はSIRIUSで作ったサイトに、youtubeを入れると
スマホで見た時に画面に収まりきれない(はみ出してしまう)を、
解消する方法を解説していきたいと思います。
ぽるもスマホで見てビックリしたんですが、
通常スマホにyoutubeを入れるとこんな感じで、
画面の幅が足りなくで動画が切れていると思います。
この状態だとスマホを横にしないとyoutubeを視聴できませんが、
見ている人にとっては、面倒でしょうがないですよね。
そんなyoutubeを簡単に画面内に収めることができるので、
是非活用してみてください。
youtubeを収める手順
これはyoutubeの共有から取ってきた動画ですが、
通常であればこのようにシリウスに貼りつけているだけだと思います。
実はここで『右クリック』をするだけで、
PCサイトとスマホサイトとで見た時に、
どう反映するかを変えれるボタンがあるので、それを利用します。
手順は『マウスの右クリック』⇒『タグ挿入』⇒『PCのみで表示(pcc)』or『』を利用します。
今回取ったyoutubeの動画をこれで囲みます。
この様に取得してきた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を振り分けれるのですが、
最後にやることが一つあります。
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やスマホでサイトを覗いても
こんな感じで、画面内に収まる様に表示されます。
ちょっと面倒ですが、
訪問者が見やすいサイトを作る為には不可欠な作業になるので、
ぜひ活用して、訪問者の滞在時間を伸ばしてくださいね＾＾