レスポンシブで埋め込んで見ましたが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のインストール】