CSS фоновое изображение/URL фильма?

Я заметил, что GIF-файлы на самом деле не совместимы во всех браузерах, поэтому вместо этого я использовал фильмы. Который работает найти до сих пор. У меня есть веб-сайт с фоновым изображением, написанным на css. У меня было ощущение, что это не сработает, но я попытался связать фильм, как изображение, и он даже не появился. Ниже html и css.

HTML

 <section id="slider">
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-2">
        <div class="block">
          <h1 class="animated fadeInUp">Need a Network?</h1>
          <p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
        </div>
      </div>
    </div>
  </div>
</section>

css

#slider {
background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px; 
}

Насколько я понимаю, ссылки на видео не будет, так что другой вариант? Как бы я это сделал? Мне нужно, чтобы текст, который есть сейчас, по-прежнему отображался, а фильм был непрозрачным. Если мне нужно сделать сам фильм непрозрачным, я могу это сделать. Спасибо

Можно просмотреть весь веб-сайт здесь

html css movie

Seth C. 23.05.2017 источник

comment

Вы имеете в виду тег video или embed? - Lloyd Dominic 23.05.2017

comment

Не уверен, что вы имеете в виду... @LloydDominic - Seth C. 23.05.2017

comment

фон: url(../img/) без повтора; - Seth C. 23.05.2017

comment

мне нужно связать фильм, но это не работает - Seth C. 23.05.2017

comment

Тег background используется только для фоновых цветов или фоновых изображений. Если вы хотите разместить видео на своей веб-странице, вам придется использовать теги video, embed или iframe. (Выберите только один! :) ) - Lloyd Dominic 23.05.2017

comment

можно ли это вставить в css? - Seth C. 23.05.2017

comment

Я не уверен, что вы имеете в виду... Куда вы хотите положить фильм/видео? - Lloyd Dominic 23.05.2017

comment

Я хотел бы, чтобы видео было позади, нужна ли сеть? часть, которая связана через css в фоновом режиме: url (/img/) no-repeat; - Seth C. 23.05.2017

comment

но когда я связываю видео, оно не появляется - Seth C. 23.05.2017

comment

Это связано с тем, что тег background может обрабатывать только цвета (background: white) или изображения (background: url("/img/image.jpg")), а не видео. Поэтому вам придется использовать теги video, embed или iframe, которые очень хорошо справляются с видео! - Lloyd Dominic 23.05.2017

comment

да, где я могу поместить видео или вставить или тег iframe, и при этом текст и другие элементы css будут работать правильно - Seth C. 23.05.2017

comment

Я заметил, что GIF-файлы на самом деле не совместимы во всех браузерах. Ну... это неправда. - Brad 23.05.2017

comment

Если вам нужно видео в качестве фона, вы можете добиться этого, используя тег video в html - Bhuwan 23.05.2017

Ответы (2)

arrow_upward
0
arrow_downward

Вы можете добавить видео за частью «нужна сеть», используя этот код:

Я заменил видео и использовал код JavaScript для автоматического воспроизведения видео!

Если вы считаете, что видео может воспроизводиться автоматически без JavaScript, удалите его!
Я также заменил тег iframe на тег video.

Вы можете заменить видео, изменив атрибут src="" в теге <source> внутри тега <video>.

function playVideo() {
document.getElementsByClassName('video')[0].play();
}

.video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -2;
object-fit: fill;
}
#slider {
/* Removed the background tags, since there are no image placed in the url of the background tag */
/*background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;*/
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
z-index: -1;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px; 
}

<body onload="playVideo()">
<section id="slider">
  <video class="video" autoplay="autoplay">
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
  </video>
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-2">
        <div class="block">
          <h1 class="animated fadeInUp">Need a Network?</h1>
          <p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
        </div>
      </div>
    </div>
  </div>
</section>
</body>

Lloyd Dominic 23.05.2017

comment

Идеальный! Спасибо, я попробую завтра и дам вам знать, как это работает @Lloyddomic - Seth C.; 23.05.2017

comment

Вот что я говорю! ... :) - Lloyd Dominic; 23.05.2017

comment

В любом случае, вы можете просто заменить свое видео, изменив атрибут src в теге iframe. - Lloyd Dominic; 23.05.2017

comment

Здравствуйте, похоже не получилось. Он по-прежнему пуст, как и раньше - Seth C.; 23.05.2017

arrow_upward
0
arrow_downward

Вы можете узнать, как добавить видео учебник.

Изменить: отредактированная скрипка

var $vid = $('video','#container');
var $msg = $('#custom-message'); 
$msg.css({
    top:$vid.offset().top + (($vid.height()/2) - ($msg.height()/2)),
    left:$vid.offset().left + (($vid.width()/2) - ($msg.width()/2))
});

video {
  position: relative;
  z-index: -1;
}

#custom-message {
  position: absolute;
  color: rgb(230, 200, 200);
  z-index: 1;
}

#slider {
  background: url("../img/") no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: 10% 0%;
  padding: 200px 0 280px 0;
  position: relative;
}

#slider:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, #8b86a3, #322e40);
  opacity: 0.8;
}

#slider .block {
  color: #E3E3E4;
}

#slider .block h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 45px;
  line-height: 60px;
  letter-spacing: 10px;
  padding-bottom: 45px;
}

#slider .block p {
  font-size: 23px;
  line-height: 40px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  letter-spacing: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" align="center">

  <section id="slider">
<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-2">
      <div id="container" align="center">
        <video width="640" height="320" autoplay>
          <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
        </video>
        <div id="custom-message">
          Need a Network?</div>
        <div id="custom-message">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.
        </div>
      </div>
    </div>
  </div>
</div>
  </section>

Hash 23.05.2017

comment

Я понимаю, но как бы я поддерживал это, и при этом CSS работал правильно? - Seth C.; 23.05.2017

CSS фоновое изображение/URL фильма?

Ответы (2)

Похожие вопросы