YouTube動画のレスポンシブル、ショートの埋込方法の確認

レスポンシブで埋め込んで見ましたがPCでは画面サイズいっぱいになり見にくくなりました。

スマホサイズの固定で埋め込むことにしました。CSSで画面サイズで切り替えるのが良さそうです。

 

●レスポンシブ

【パソコンからの申込み】

●width=”458″ height=”813″

 

●width=”560″ height=”315″

●レスポンシブ

【スマートフォンからの申込み】

●width=”458″ height=”813″

●レスポンシブ

【AndroidスマホへMicrosoftTeamsのインストール】

●width=”560″ height=”315″

●レスポンシブ

【面談までの流れ】

●width=”560″ height=”315″

●レスポンシブ

【AndroidスマホへMicrosoftTeamsのインストール】

YouTubeショートの埋め込み
●width=”507″ height=”901″

●レスポンシブ 177.78% 縦長レスポンシブ

【AndroidスマホへMicrosoftTeamsのインストール】

●width=”507″ height=”901″

【AndroidスマホへMicrosoftTeamsのインストール】

●width=”507″ height=”901″

【AndroidスマホへMicrosoftTeamsのインストール】

●width=”507″ height=”901″

【面談までの流れ】

●レスポンシブ padding-bottom: 177.78%;

●レスポンシブ padding-bottom: 177.78%;

【面談までの流れ】

●レスポンシブ padding-bottom: 177.78%;

【スマートフォンからの申込み】

●レスポンシブ width=”507″ height=”901″

 

最終はこちらの固定にしました。

レスポンシブの設定
16 9 177.78% 56.25%
4 3 133.33% 75.00%
縦長確認用サイズ
458 813 56.33% 177.51%
YouTubeショートのデフォルトの埋め込みコードのサイズ
iframe width=”507″ height=”901
1対 X
507 901 1 1.78
320 480 1 1.5
使用したサイズ
300 533

【スマートフォンからの申込み】

 

【面談までの流れ】

 

【AndroidスマホへMicrosoftTeamsのインストール】