ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

3ステップでできる!CSSを使って動画をレスポンシブ化する方法

3ステップでできる!CSSを使って動画をレスポンシブ化する方法

動画をレスポンシブにする

以前「YouTube動画の表示サイズをレスポンシブにする方法。」でJavaScriptを使ってYouTubeなどの動画をレスポンシブに対応させる方法をご紹介しました。

今回はiframeで出力された動画をCSSを使って簡単にレスポンシブ化する方法をご紹介します。

ステップ1:動画を用意する

購入率を3割上げる!スマートフォンECの動画活用事例

上記の記事を参考に、YouTubeからiframeで埋め込みコードを取得します。今回は参考に下記の動画を使います。

レスポンシブ化する動画

<iframe width="560" height="315" src="http://www.youtube.com/embed/k7sbl0p9kxw" frameborder="0" allowfullscreen></iframe>
ステップ2:クラス名を指定する

先ほどのiframeに任意のクラス名を指定します。今回はyoutubeというクラスを付けましょう。

<div class="youtube">
    <iframe width="560" height="315" src="http://www.youtube.com/embed/k7sbl0p9kxw" frameborder="0" allowfullscreen></iframe>
</div>
ステップ3:CSSで調整する

あとは下記のCSSで先ほど指定したクラス名のスタイルを調整することで、画面幅に合わせてYouTube動画のサイズも可変するようになります。

.youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
}
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

当たり前ですが、指定するクラス名を変えた場合はCSSの「.youtube」も同じクラス名にしてくださいね。

参考:CSS: Elastic Videos

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。