@3dben

Как установить видео в качестве фона?

У меня есть секция(скрин ниже). На видео стоит картинка в виде загрушки poster="img/video-bg.jpg" при нажатии на кнопку в центре секции описание + кнопка + заглушка должны пропасть и должно начаться воспроизведение видео.

Я наживаю на кнопку. Кнопка с описанием пропадает, а вот картинка никуда не девается и видео не воспроизводиться.
https://jsfiddle.net/8o89hfbf/

<section class="video">
	<video class="video_it" src="" id="videobg" width="100%" height="auto" preload="auto" poster="img/video-bg.jpg">
		<source src="video/video-bg.mp4">
		<source src="video/video-bg.webm">
	</video>
	<div class="video_panel text-center">
		<p class="video_descr">Explore Our Awesomeness</p>
		<div class="video_play" id="play"></div>
		<p class="video_info">Click to play the video</p>
	</div>
</section>


.video {
  color: #fefefe;
  min-height: 500px;
  position: relative;
  overflow: hidden;
}
.video_descr {
  font-size: 30px;
  font-family: "poppins-medium", sans-serif;
}
.video_info {
  font-size: 15px;
  font-family: "poppins-regular", sans-serif;
}
.video_play {
  background-image: url(../img/sprite.png);
  background-position: -216px -86px;
  width: 80px;
  height: 80px;
  display: inline-block;
  margin: 0.66667rem 0 1.8rem;
}
.video_it {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover;
  position: absolute;
}


var e = $("#videobg")[0];
	$("#play").click(function () {
		$(this).closest(".video_panel").hide(300), e.play()
	}), e.addEventListener("ended", function () {
		$(".video_panel").show(300)
	})


aceba100adc643a3b90855e42e51ba51.jpg
  • Вопрос задан
  • 212 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED
Надо подключить jQuery (в блоке javascript по шестеренке вверху) и прописать путь к существующему ролику.

Работает же https://jsfiddle.net/8o89hfbf/1/
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance...
ИМХО, но правильнее воспроизводить видео на фоне вот так: codepen.io/bingo347/pen/wgVGdw
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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