サンプルページ

YouTubeのレスポンシブ対応をチェックできるデモページです。

 

このデモページは、shopifyのページではありません。
サイドバーはなく、1カラムのページで表示しています。

 

あくまでもレスポンシブ対応確認のためのページですので
参考していただけたらと思います。

 

 

\この記事デモページでできること/

【参考にどうぞ】以下の5つの動画でチェック!

     

  1. 確認事項:レスポンシブ対応の確認。パソコンで画面をスライドしてサイズを変えたり、スマホから見てみてください。
  2. 確認事項:関連する動画のみを表示できているかの確認。動画の再生後、関連しない動画を省く設定ができているか、見てみてください。
  • おすすめ度1:中央寄せ横幅指定
  • おすすめ度2:横幅指定
  • おすすめ度3:横幅いっぱい100%

※おすすめ1.2.3.はスマホ画面で見ると横幅いっぱい全画面表示で変わりがありません。
パソコン画面で見ると違いがわかります。

 

動画は、当運営をしている「ベビープラスマイルちゃんねる」の動画を使用しています。

 

 

未編集の動画

何もCSS編集なく、埋め込みコードを貼りつけただけの動画。
レスポンシブ対応になっていないので、スマホ画面のサイズになると動画枠が切れて表示されるはずです。

 

 

参考:中央寄せ横幅指定の設定をした動画(50%指定)

横幅50%指定をしている動画。
スマホ画面のサイズ枠になっても常に50%になっているはずです。

 

 



 

 

1.中央寄せ横幅指定の設定をした動画(サイズ指定)

最大600pxのサイズ指定をしている動画。
600pxサイズ以下になると、横幅全面表示になります。

 

 



 

 

2.横幅指定の設定をした動画(左寄りに配置)

最大600pxのサイズ指定をしている動画。
600pxサイズ以下になると、横幅全面表示になります。
しかし、600px以上の画面のとき、動画枠は左側に配置されているはずです。

 

 



 

 

3.横幅いっぱいの100%設定をした動画

パソコン画面枠でもスマホ画面枠でも常に全画面横幅100%、横幅いっぱいに表示されているはずです。

 

 

まとめ:比較検証

一番のおすすめは、
1.中央寄せ横幅指定の設定をした動画(サイズ指定)が見やすいかと思います。
各自サイトによって判断ください!

 

shopify以外のワードプレスなどにも活用できます♪
↓↓

※注意点※
shopifyで試したCSSコードをワードプレス(テーマ:cocoon)で活用したら不具合がありました。

↓↓
【私がやってみた解決策】
不具合はテーマによって違うかもしれません。
また、すべての不具合に解決案も解決するか、不明です。
各自サイトによって自己責任でお願いします。
バックアップも忘れずに!

 

ワードプレスによる不具合の事例

cssコードによるズレ【ワードプレス・cocoon】

 

中央寄せ横幅指定のレシポンシブ用コード追加」によるCSS指定では、ワードプレスのcocoonのテーマでは写真のようにズレが発生しました。
CSSを指定するために「カスタムHTML」ブロックでdiv指定をしています。

 

不具合の解決策

【CSSコード】修正前

/* 動画を囲うdiv */
.youtube {
position: relative;
width:100%; /* 横幅は100%に */
height:0; /* 高さは0に(padding-topで高さを指定するため) */
padding-top: 56.25%; /* 高さを指定(16:9) */
}

cssコードによるズレの解決策【ワードプレス・cocoon】

【CSSコード】修正後
※下2行を削除

/* 動画を囲うdiv */
.youtube {
position: relative;
width:100%; /* 横幅は100%に */
}

cssコードによるズレの解決策【ワードプレス・cocoon】

cssコードによるズレの解決策【ワードプレス・cocoon】

 

中央寄せの横幅を指定でき、レスポンシブ対応になったYouTubeを埋め込むことができました。

 

各自サイトで判断してください。