Пример 1:
|
1 2 3 4 5 6 |
<div class="fon-video-1"> <div class="tv-fon"> <img alt="" src="/demo/i/tvram/fon-1.png" /> </div> <video src="/demo/i/tvram/remont.mp4" autoplay loop muted></video> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.fon-video-1 { position: relative; margin: 20px auto; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .fon-video-1 .tv-fon { position: relative; z-index: 1; font: 0/0 a; } .fon-video-1 .tv-fon img { width: 100%; } .fon-video-1 video { width: 70%; position: absolute; top: 10%; left: 30%; } |
Пример 2:
|
1 2 3 4 5 6 |
<div class="fon-video-2"> <div class="tv-fon"> <img alt="" src="/demo/i/tvram/fon-2.png" /> </div> <video src="/demo/i/tvram/cat.mp4" autoplay loop muted></video> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.fon-video-2 { position: relative; margin: 20px auto; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .fon-video-2 .tv-fon { position: relative; z-index: 1; font: 0/0 a; } .fon-video-2 .tv-fon img { width: 100%; } .fon-video-2 video { width: 60%; position: absolute; top: 10%; left: 40%; } |
Пример 3:
|
1 2 3 4 5 6 |
<div class="fon-video-3"> <div class="tv-fon"> <img alt="" src="/demo/i/tvram/fon-3.png" /> </div> <video src="/demo/i/tvram/aqua.mp4" autoplay loop muted></video> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.fon-video-3 { position: relative; margin: 20px auto; } .fon-video-3 .tv-fon { position: relative; z-index: 1; font: 0/0 a; } .fon-video-3 .tv-fon img { width: 100%; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.3)); } .fon-video-3 video { width: 90%; position: absolute; top: 10%; left: 5%; box-shadow: 0 0 26px rgba(0,0,0,0.4), 0 0 30px rgba(0,0,0,0.3); } |
Пример 4:
|
1 2 3 4 5 6 |
<div class="fon-video-4"> <div class="tv-fon"> <img alt="" src="/demo/i/tvram/fon-4.png" /> </div> <video src="/demo/i/tvram/sky.mp4" autoplay loop muted></video> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.fon-video-4 { position: relative; margin: 20px auto; max-width: 500px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .fon-video-4 .tv-fon { position: relative; z-index: 1; font: 0/0 a; } .fon-video-4 .tv-fon img { width: 100%; } .fon-video-4 video { width: 120%; position: absolute; top: 10%; left: -10%; } |
Пример 5:
|
1 2 3 4 5 6 |
<div class="fon-video-5"> <div class="tv-fon"> <img alt="" src="/demo/i/tvram/fon-5.png" /> </div> <video src="/demo/i/tvram/code.mp4" autoplay loop muted></video> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.fon-video-5 { position: relative; margin: 0 auto; max-width: 500px; overflow: hidden; } .fon-video-5 .tv-fon { position: relative; z-index: 1; font: 0/0 a; } .fon-video-5 .tv-fon img { width: 100%; } .fon-video-5 video { width: 140%; position: absolute; top: 16%; left: -5%; } |
Рамки взяты с сайта pngwing.com, а видео с pexels.com
Здравствуй можешь помочь как установить толик к картинку телевизор? Размер картинки 512х512
Видео формата 4:3 должно быть, иначе нужно править картинку или слои накладывать, чтобы перекрыть то, что не умещается.
HTML как у примера 5
CSS:
.fon-video-5 { position: relative; margin: 0 auto; max-width: 512px; overflow: hidden; } .fon-video-5 .tv-fon { position: relative; z-index: 1; font: 0/0 a; } .fon-video-5 .tv-fon img { width: 100%; } .fon-video-5 video { width: 80%; position: absolute; top: 22.5%; left: 8%; }Здравствуйте! Подскажите пожалуйста, как на рамку поверх наложить текст?
Абсолютным позиционированием, так же как и видео, только z-index ставить больше, чем у фона.
Чел ты просто красавчик!
Вы что из нулевых эти рамки взяли?))
Такие вот нашел 🙂
А вообще просто хотел посмотреть, как это будет выглядеть - видео под графическим элементом.
Прикольные примеры.