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

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

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

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

YouTube動画の表示サイズをレスポンシブにする方法。

YouTube動画の表示サイズをレスポンシブにする方法。

「ジャパネットたかた」や「サンワサプライ」などで活用されている商品紹介動画。YouTubeなどの外部サービスを組み込む場合、そのままでは指定したサイズで表示されてしまい、画面サイズの小さい端末などでは切れてしまいます。

以前の記事ではYouTube動画をウェブサイトに埋め込む方法をご紹介しましたが、今回はその動画をレスポンシブに対応させる方法をご紹介します。

FitVid.jsを使って動画をレスポンシブ化

今回はjQueryのプラグインとして動作する「FitVid.js」( http://fitvidsjs.com/ )使ってレスポンシブ化を行います。

あらかじめ動画の埋め込みを行い、動画を内包するボックスに任意のidやclassを指定しておいてください。(今回の例ではvidを使います)

1、JavaScriptをダウンロード

まずGitHubへアクセスをし、JavaScriptファイルをダウンロードします。

「jquery.fitvid.js」がそのファイルになるので、任意の場所に保存しましょう。
※このライブラリにはjQueryが必須になります。

JavaScriptの読み込みは</body>の直前に配置すれば問題ありません。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script>
  $(document).ready(function(){
    $("任意のidやclass").fitvids();
  });
</script>

jQuery、FitVids.jsの順に読み込みます。

2,YouTube動画を埋め込む

購入率を3割上げる!スマートフォンECの動画活用事例を参考にコードを取得し動画を埋め込み、任意のidやclassを指定します。

<section>
  <div id="vid">
    <iframe width="560" height="315" src="http://www.youtube.com/embed/VR5HFJb4HJM" frameborder="0" allowfullscreen></iframe>
  </div>

(中略)

<script src="js/jquery.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script>
  $(document).ready(function(){
    $("#vid").fitVids();
  });
</script>

YouTubeの埋め込みコード(iframe)のソースはそのまま使用することができます。

またYouTubeの他にもVimeoなどの動画共有サイトの埋め込みコードもそのまま使えるので、是非お試し下さい。

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

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

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

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+