CSS'de Background image yerine Video koyma

27-02-2021, 17:55:32

Merhabalar arkadaşlar,

elimde bulunan bir html temada css'lerle arka plana bir resim koyulmuş ben bu resim yerine video koymak istiyorum mp4 formatında.

css kodları ;

width: 100%;
height: 660px;
min-height: 660px;
background-image: url([COLOR=var(--link-color)]../images/slider-bg.png[/COLOR]), -webkit-gradient(linear, left top, left bottom, from(#002b6a), to(#020230));
/* background-image: url([COLOR=var(--link-color)]../images/slider-bg.png[/COLOR]), linear-gradient(to bottom, #002b6a, #020230); */
background-repeat: no-repeat;
background-position: left;
z-index: 999;

yükleyeceğim video ise video.mp4 şeklinde kodu nasıl düzenlemem gerekiyor ?

Yardımlarınız için şimdiden teşekkürler

27-02-2021, 17:59:28

#2

Onur89TR

Hocam css & html kodları code tagları arasında yapıştırırsanız daha iyi olur. Web site adresinizi de pm alabilir miyim

27-02-2021, 18:02:12

#3

talhacimen58

<div style="min-height: 550px;" class="hero static-hero">
    <header>
      <div class="container">
        <button class="basket-btn"><img src="images/sepet.png" alt=""></button>
        <div class="logo">
          <a href="#"><img src="images/LOGO.png" alt=""></a>
        </div>

[COLOR=#D5D5D5][FONT=Consolas][COLOR=#8A8A8A][COLOR=#D5D5D5].hero.static-hero[/COLOR][/COLOR][COLOR=#8A8A8A] {[/COLOR][/FONT][/COLOR]
[COLOR=#D5D5D5][FONT=Consolas][LIST=1][*]    [COLOR=#35D4C7]min-height[/COLOR]: 790px;[*]    [COLOR=#35D4C7]background-image[/COLOR]: url([COLOR=var(--link-color)]../images/dedicated-bg.png[/LIST][/FONT][/COLOR][FONT=Consolas][LIST=1]), -webkit-gradient(linear, left top, left bottom, from(#002b6a), to(#020230));[*]    [COLOR=#35D4C7]background-image[/COLOR]: url([COLOR=var(--link-color)]../images/dedicated-bg.png[/COLOR]), linear-gradient(to bottom, #002b6a, #020230);[*]    [COLOR=#35D4C7]background-size[/COLOR]: 100%;[*]    [COLOR=#35D4C7]background-position[/COLOR]: top;[/LIST][/FONT][/COLOR]

27-02-2021, 18:03:16

#4

talhacimen58

Onur89TR adlı üyeden alıntı: mesajı görüntüle

Hocam css & html kodları code tagları arasında yapıştırırsanız daha iyi olur. Web site adresinizi de pm alabilir miyim

localde çalışıyorum hocam bu şekilde gösterebilirim

27-02-2021, 18:07:45

#5

Onur89TR

Hocam css kodunuzun o kısmı lazım ancak forumdan dolayı COLOR= gibi ekstra kodlar çıkmakta gördüğünüz üzere. Css kodunuzun o kısmını dosya.co sitesine upload edip paylaşır mısınız

27-02-2021, 18:10:31

#6

talhacimen58

Onur89TR adlı üyeden alıntı: mesajı görüntüle

Hocam css kodunuzun o kısmı lazım ancak forumdan dolayı COLOR= gibi ekstra kodlar çıkmakta gördüğünüz üzere. Css kodunuzun o kısmını dosya.co sitesine upload edip paylaşır mısınız

https://dosya.co/0mlu2nyaa6io/test.css.html

buyurun hocam

27-02-2021, 18:20:55

#7

rws

background image yerine video koyamazsın, div içine video koyup bunu z index ile en arkaya atarsın örnek

<div class="hero static-hero">
  <video src="video.mp4"></video>
</div>

.static-hero{
position: relative;
}
static-hero video {
position: absolute;
top: 0;
left: 0;
z-index: -999;
}

27-02-2021, 19:13:38

#8

Onur89TR

<html>
<head>
    <style type="text/css">
        html, body {   
            padding:0;margin:0;outline:0;                      
        }
        .hero.static-hero {
            padding-top: 57%;
            height: 0;
            width:100%;
            position:relative;
        }
        .hero.static-hero video {
            width:100%;padding:0;margin:0;outline:0;
            position: absolute;left:0;right:0;bottom:0;top:0;
        }
    </style>
</head>
<body>
    <div class="hero static-hero">
        <header>
            <div class="container">
            <video controls>
              <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
            Your browser does not support the video tag.
            </video>
            </div>    
        </header>
    </div>
</body></html>

Böyle dener miyiz