web-dev-qa-db-ja.com

フルスクリーンのHTML5ビデオ背景ブラーを機能させるには？

私はここの本のすべてのトリックを試したようですが、何も機能していません。

ぼかしが必要なフルスクリーンの絶対位置のHTML5ビデオ背景があります。ただし、エッジをシャープにしたいと思います。

私はこれまでに約20または30のさまざまなソリューションをオンラインで試しましたが、何も機能していないようです。

これが私が試したことです：

-負のマージンを設定する

-負の上、左、右、下のマージンを設定する

-オーバーフローが非表示のコンテナに正のマージンを設定する

-オーバーフローが隠されたコンテナに設定する

-ここに記載されている方法： CSS3フィルターブラーを使用した定義済みエッジ -- CSS3フィルターブラーを使用した定義済みエッジ -- CSSは、絶対divを使用してシャープなエッジをぼかして保持します - ソリッドエッジを保持しながら絶対背景をぼかす - http://volkerotto.net/2014/07/03/css-background-image-blur-without-blury-edges/

これまでのコードは次のとおりです。

HTML

<video id="videobcg" preload="auto" autoplay="true" loop="loop"     muted="muted" volume="0">
<source src="vid/myVid.mp4" type="video/mp4">
<source src="vid/myVid.webm" type="video/webm">
    Sorry, your browser does not support HTML5 video.
</video>

CSS

#videobcg {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100% !important;
    max-height: 100% !important;
    z-index: -1000;
    overflow: hidden;
    object-fit: fill;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
}

たぶん私は完全に間違ったことをしたのかもしれませんが、よくわかりません。それが機能するのを妨げている私がしていることはありますか？

助けてくれてありがとう！

csshtmlhtml5-videocss-filters
10
Finn C

そのビデオを親よりも大きくして、その中央に配置することをお勧めします。これにより、親の境界内の白いぼやけが取り除かれると思います。

@Ashugeo、私はあなたのコードを取り、あなたが何年も前に提案したことをしました、そしてそれはうまくいくようです。

残念ながら、これは機能していないようです。また、ビデオをさらに大きくして中央に配置しようとしましたが、それでも機能しないようです。

@Finn C、最近は変換を使用して機能しているようです： https://jsfiddle.net/Erik_J/6f483wm9/

HTML

<div id="container">
    <video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
    Sorry, your browser does not support HTML5 video.
    </video>
</div>

CSS

body{ margin:0;}

#container {
    width: 100vw;
    height: 100vh;
    text-align: center;
    overflow: hidden;
}
#videobcg {
    width: inherit;
    height: inherit;
    -o-filter: blur(15px);
    filter: blur(15px);
    object-fit: cover;
    transform: scale(1.04);
}
4
Erik.J

これは ペン あなたのニーズに合いますか？

HTML

<div id="container">
    <video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
    Sorry, your browser does not support HTML5 video.
    </video>
</div>

CSS

#container {
  width: 640px;
  height: 360px;
  overflow: hidden;
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
}

#videobcg {
  width: 100%;
  height: auto;
}

そのビデオを親よりも大きくして、その中央に配置することをお勧めします。これにより、親の境界内の白いぼやけが取り除かれると思います。

2
Hugo Sainte-Marie