[解決済み] YouTubeの動画をレスポンシブな幅に縮小する
2022-07-04 17:45:56
質問
当社のウェブサイトに YouTube の動画を埋め込んでいますが、タブレットや携帯電話のサイズに画面を縮小すると、幅 560px あたりで縮小が止まってしまいます。これは YouTube 動画の標準なのでしょうか、それとももっと小さくするためにコードに追加できることがあるのでしょうか。
どのように解決するのですか?
YouTubeの動画をCSSでレスポンシブにすることができます。iframe をクラス "videowrapper" の div で囲み、以下のスタイルを適用してください。
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videowrapper div はレスポンシブ要素内に配置する必要があります。.videowrapper のパディングは、動画が折りたたまれないようにするために必要です。レイアウトに応じて数値を調整する必要があるかもしれません。
関連
-
[解決済み] ffprobe または avprobe が見つかりませんでした。1つインストールしてください。
-
[解決済み] YouTubeです。YouTubeの動画からクローズドキャプションのトランスクリプトを抽出する方法は?
-
[解決済み] YouTubeにサインインしてください」というポップアップをブロックする方法は?[クローズド]
-
[解決済み] YouTubeからチャンネルIDを取得するにはどうすればよいですか?
-
[解決済み] Windowsファイアウォールでyoutubeの全IPアドレスをブロックさせる方法はありますか?
-
[解決済み] Youtube - プレイリストをダウンロードする - youtube-dl
-
[解決済み] プレイリストに含まれる動画 ID を取得する - YouTube API v3
-
[解決済み] YouTube APIからYouTubeビデオのサムネイルを取得する方法を教えてください。
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] GitHub の wiki ページに YouTube の動画を埋め込むにはどうしたらいいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AMP HTMLでYouTubeのプレイリストを表示
-
[解決済み] ffprobe または avprobe が見つかりませんでした。1つインストールしてください。
-
[解決済み] YouTubeです。YouTubeの動画からクローズドキャプションのトランスクリプトを抽出する方法は?
-
[解決済み] YouTubeにサインインしてください」というポップアップをブロックする方法は?[クローズド]
-
[解決済み] YouTubeからチャンネルIDを取得するにはどうすればよいですか?
-
[解決済み] Windowsファイアウォールでyoutubeの全IPアドレスをブロックさせる方法はありますか?
-
[解決済み] Youtube - プレイリストをダウンロードする - youtube-dl
-
[解決済み] プレイリストに含まれる動画 ID を取得する - YouTube API v3
-
[解決済み] YouTubeの動画をレスポンシブな幅に縮小する