Получение полноэкранного фонового изображения HTML5 для работы?

Question

Мне показалось, что я пытаюсь использовать все трюки в книге, и ничего не работает.

У меня есть полноэкранный, абсолютный позиционный фон HTML5, который мне нужно размыть. Тем не менее, мне бы хотелось, чтобы у него были острые края.

Я пробовал около 20 или 30 различных решений в сети до сих пор, и ничто, казалось, не работало.

Вот что я пробовал:

-Установку отрицательных полей

-Установки отрицательные сверху, слева, справа, снизу поле

-Установки положительных полей в контейнере с переполнением скрытых

-Сбор в контейнере с переливом скрыт

-Методы здесь: Defined Edges With CSS3 Filter Blur - Defined Edges With CSS3 Filter Blur - CSS blur and retain sharp edges using absolute div - Blur absolute background whilst retaining solid edges - 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); 
} 

Может быть, я сделал что-то совершенно неправильно, я не совершенно уверен. Есть ли что-то, что я делаю, это мешает ему работать?

Заранее благодарим за любую помощь!

Answer 1

Будет ли это pen соответствовать вашим потребностям?

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; 
} 

Вы можете сделать это видео больше, чем родитель и центрировать его в этом, я думаю, что бы избавиться от белых пятен внутри границ родителя.