動画の拡大表示を行うと動画の上下が画面外にはみ出てしまう現象について。 - Cocoonテーマに関する質問 https://wp-cocoon.com/community/cocoon-theme/%e5%8b%95%e7%94%bb%e3%81%ae%e6%8b%a1%e5%a4%a7%e8%a1%a8%e7%a4%ba%e3%82%92%e8%a1%8c%e3%81%86%e3%81%a8%e5%8b%95%e7%94%bb%e3%81%ae%e4%b8%8a%e4%b8%8b%e3%81%8c%e7%94%bb%e9%9d%a2%e5%a4%96%e3%81%ab%e3%81%af/ Cocoon ディスカッション掲示板 ja Fri, 16 Oct 2026 18:16:35 +0000 wpForo 60 RE: 動画の拡大表示を行うと動画の上下が画面外にはみ出てしまう現象について。 https://wp-cocoon.com/community/cocoon-theme/%e5%8b%95%e7%94%bb%e3%81%ae%e6%8b%a1%e5%a4%a7%e8%a1%a8%e7%a4%ba%e3%82%92%e8%a1%8c%e3%81%86%e3%81%a8%e5%8b%95%e7%94%bb%e3%81%ae%e4%b8%8a%e4%b8%8b%e3%81%8c%e7%94%bb%e9%9d%a2%e5%a4%96%e3%81%ab%e3%81%af/#post-82175 Thu, 14 Nov 2024 07:14:59 +0000 迅速な回答感謝

長年にわたり気になっていたことが解決しました！！

ありがとうございます。

自治会のホームページを始めて6年になります。
66歳でHP（WordPress）のことは全く分からず始めました。
それでも何とか形に出来たのはCocoonのお蔭です。

それと何度もフォーラムで助けていただきました。
今後ともよろしくお願いします。

]]> Cocoonテーマに関する質問 akai8068 https://wp-cocoon.com/community/cocoon-theme/%e5%8b%95%e7%94%bb%e3%81%ae%e6%8b%a1%e5%a4%a7%e8%a1%a8%e7%a4%ba%e3%82%92%e8%a1%8c%e3%81%86%e3%81%a8%e5%8b%95%e7%94%bb%e3%81%ae%e4%b8%8a%e4%b8%8b%e3%81%8c%e7%94%bb%e9%9d%a2%e5%a4%96%e3%81%ab%e3%81%af/#post-82175 RE: 動画の拡大表示を行うと動画の上下が画面外にはみ出てしまう現象について。 https://wp-cocoon.com/community/cocoon-theme/%e5%8b%95%e7%94%bb%e3%81%ae%e6%8b%a1%e5%a4%a7%e8%a1%a8%e7%a4%ba%e3%82%92%e8%a1%8c%e3%81%86%e3%81%a8%e5%8b%95%e7%94%bb%e3%81%ae%e4%b8%8a%e4%b8%8b%e3%81%8c%e7%94%bb%e9%9d%a2%e5%a4%96%e3%81%ab%e3%81%af/#post-82173 Thu, 14 Nov 2024 06:47:39 +0000

このCSSを下記のコードの何処へ追加してよいのか分かりません。

やばいです、CSSの知識有無とは別に、肝心なWordPressの基本操作を理解されていませんね（笑）
→→→に先述のコードをコピペし、ボタンをクリックし保存します。

]]> Cocoonテーマに関する質問 大門未知子 https://wp-cocoon.com/community/cocoon-theme/%e5%8b%95%e7%94%bb%e3%81%ae%e6%8b%a1%e5%a4%a7%e8%a1%a8%e7%a4%ba%e3%82%92%e8%a1%8c%e3%81%86%e3%81%a8%e5%8b%95%e7%94%bb%e3%81%ae%e4%b8%8a%e4%b8%8b%e3%81%8c%e7%94%bb%e9%9d%a2%e5%a4%96%e3%81%ab%e3%81%af/#post-82173 RE: 動画の拡大表示を行うと動画の上下が画面外にはみ出てしまう現象について。 https://wp-cocoon.com/community/cocoon-theme/%e5%8b%95%e7%94%bb%e3%81%ae%e6%8b%a1%e5%a4%a7%e8%a1%a8%e7%a4%ba%e3%82%92%e8%a1%8c%e3%81%86%e3%81%a8%e5%8b%95%e7%94%bb%e3%81%ae%e4%b8%8a%e4%b8%8b%e3%81%8c%e7%94%bb%e9%9d%a2%e5%a4%96%e3%81%ab%e3%81%af/#post-82172 Thu, 14 Nov 2024 06:18:32 +0000 早速にご回答頂きましてありがとうございます。

1.のポスター画像を止める。

ポスター画像の設定を止めると正常に動画の上下が切れることなく拡大表示されました。

ポスター画像を設定しないと真っ黒な表示になってしまいます。
動画の出だしだけでも静止画で表示させることは出来ませんか？

2.CSSを追加

.wp-block-video  {
  object-fit: contain;
}

このCSSを下記のコードの何処へ追加してよいのか分かりません。

<!-- wp:video {"id":8641,"align":"center"} -->
<figure class="wp-block-video aligncenter"><video controls poster="https://myouken.chillout.jp/wp-content/uploads/2024/11/dcd117fbb71ab5c1d34c1420986e22d6-scaled.jpg" src="https://myouken.chillout.jp/wp-content/uploads/2024/11/ccd112e85f6476b2e974c328b4072153.mp4"></video><figcaption class="wp-element-caption"><span class="fz-20px">古賀啓三郎作品集出版記念2024/11</span><br><span class="fz-16px">絵画作成：妙見東4丁目　古賀啓三郎</span><br>挿入曲：Sometimes When It Rains<br>作曲者: Rolf Løvland<br>バイオリン: Fionnuala Sherry<br>ピアノ: Rolf Løvland</figcaption></figure>
<!-- /wp:video -->

以上、ご教授ください。

よろしくお願いします。

]]> Cocoonテーマに関する質問 akai8068 https://wp-cocoon.com/community/cocoon-theme/%e5%8b%95%e7%94%bb%e3%81%ae%e6%8b%a1%e5%a4%a7%e8%a1%a8%e7%a4%ba%e3%82%92%e8%a1%8c%e3%81%86%e3%81%a8%e5%8b%95%e7%94%bb%e3%81%ae%e4%b8%8a%e4%b8%8b%e3%81%8c%e7%94%bb%e9%9d%a2%e5%a4%96%e3%81%ab%e3%81%af/#post-82172 RE: 動画の拡大表示を行うと動画の上下が画面外にはみ出てしまう現象について。 https://wp-cocoon.com/community/cocoon-theme/%e5%8b%95%e7%94%bb%e3%81%ae%e6%8b%a1%e5%a4%a7%e8%a1%a8%e7%a4%ba%e3%82%92%e8%a1%8c%e3%81%86%e3%81%a8%e5%8b%95%e7%94%bb%e3%81%ae%e4%b8%8a%e4%b8%8b%e3%81%8c%e7%94%bb%e9%9d%a2%e5%a4%96%e3%81%ab%e3%81%af/#post-82166 Thu, 14 Nov 2024 04:43:33 +0000 ●原因

動画を配置した際、ポスター画像を設定している。
ポスター画像を設定すると、WordPressのCSSがobject-fit:coverとなっておりコンテナに収まるように動画を調整する（図参照）。
このため、拡大したとき画面に動画の幅が収まるよう調整され、上下がトリミングされてしまう。

●対策

2つの方法があります。

  1. ポスター画像の設定を止める。
  2. 以下のCSSを追加し、コンテナにビデオの比率そのままで表示させる。
.wp-block-video  {
  object-fit: contain;
}
]]> Cocoonテーマに関する質問 大門未知子 https://wp-cocoon.com/community/cocoon-theme/%e5%8b%95%e7%94%bb%e3%81%ae%e6%8b%a1%e5%a4%a7%e8%a1%a8%e7%a4%ba%e3%82%92%e8%a1%8c%e3%81%86%e3%81%a8%e5%8b%95%e7%94%bb%e3%81%ae%e4%b8%8a%e4%b8%8b%e3%81%8c%e7%94%bb%e9%9d%a2%e5%a4%96%e3%81%ab%e3%81%af/#post-82166 動画の拡大表示を行うと動画の上下が画面外にはみ出てしまう現象について。 https://wp-cocoon.com/community/cocoon-theme/%e5%8b%95%e7%94%bb%e3%81%ae%e6%8b%a1%e5%a4%a7%e8%a1%a8%e7%a4%ba%e3%82%92%e8%a1%8c%e3%81%86%e3%81%a8%e5%8b%95%e7%94%bb%e3%81%ae%e4%b8%8a%e4%b8%8b%e3%81%8c%e7%94%bb%e9%9d%a2%e5%a4%96%e3%81%ab%e3%81%af/#post-82165 Thu, 14 Nov 2024 00:20:31 +0000 HP上で動画を再生時、動画の拡大表示を行うと動画の上下が画面外にはみ出てしまう現象について。
例えばスマホ画面を横にして動画を拡大表示した場合やノートパソコンで動画を拡大表示した場合などです。

動画の画面は正方形ですので、長方形の画面で拡大再生した場合、
動画が画面の両サイド一杯に表示されるため、
動画の上下が画面外となってしまいます。

動画の上下を画面の上下に合わせて表示させる方法を教えていただけませんか。
当方、CSSの編集方法法がわかりません。

妙見東自治会 | 古賀啓三郎作品集出版記念

]]> Cocoonテーマに関する質問 akai8068 https://wp-cocoon.com/community/cocoon-theme/%e5%8b%95%e7%94%bb%e3%81%ae%e6%8b%a1%e5%a4%a7%e8%a1%a8%e7%a4%ba%e3%82%92%e8%a1%8c%e3%81%86%e3%81%a8%e5%8b%95%e7%94%bb%e3%81%ae%e4%b8%8a%e4%b8%8b%e3%81%8c%e7%94%bb%e9%9d%a2%e5%a4%96%e3%81%ab%e3%81%af/#post-82165