0

У меня есть несколько цветовых схем для сайта. Подскажите, как можно запускать фоновое видео с помощью cookie и хранить их до нажатия на кнопку другой цветовой схемы, т.е. чтобы видео исчезало

2
  • А можно более подробнее... ?
    – NeedH8
    Commented 28 июл. 2017 в 17:37
  • У меня на сайте есть 4 цветовые схемы: розовая, синяя, коричневая и серая. Я хочу, чтобы при нажатии на розовую фон был розовый, аналогично с синей и коричневой), а при нажатии на серую у меня на фоне было динамическое видео. А при нажатии на другой цвет, например розовый, фон снова становился розовым. Можно реализовать это с помощью куки или есть иной способ? Спасибо)
    – FOX
    Commented 29 июл. 2017 в 8:04

1 ответ 1

0

Стилизация уже будет на вашей стороне, но идея такова: К body цепляем определенные классы, которые будут характеризовать поведение элементов (video или цвет) на странице при нажатии на кнопку. Если нужно запоминать какая тема страницы выбрана, тогда нужны куки, чтобы проверять какую тему выбрал пользователь. Но а пока, код следующий:

let wrapper = document.getElementById('Wrapper');
let buttons = document.querySelectorAll('button');
let classObject = {
	'red': 'add_red',
	'yellow': 'add_yellow',
	'video': 'active'
}

Array.from(buttons).forEach(function(el){
	el.addEventListener('click', function(){
		for(let value in classObject) {						
			if(el.classList.contains(value)) {
				wrapper.classList.add(classObject[value])
			} else {
				wrapper.classList.remove(classObject[value]);
			}
		}
		
	})
})
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Raleway', sans-serif;
}

.wrapper {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: background-color 1s;
  transition: background-color 1s;
}
.wrapper button {
  font-family: 'Raleway', sans-serif;
  color: black;
  background-color: #1C110A;
  color: #fff;
  border: none;
  margin: 5px 10px;
  padding: 10px 20px;
  font-size: 20px;
  text-transform: uppercase;
  box-shadow: 0 10px 60px -5px rgba(0, 0, 0, 0.3);
  -webkit-transition: 300ms;
  transition: 300ms;
  cursor: pointer;
  outline: none;
}
.wrapper button:hover {
  opacity: 0.9;
}
.wrapper.add_red {
  background-color: #A20021;
}
.wrapper.add_yellow {
  background-color: #F2BB05;
}
.wrapper.active .video-background {
  display: block;
}

.video-background {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
  width: 100%;
  display: none;
  height: 100%;
  z-index: -1;
}
.video-background video {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
<div id="Wrapper" class="wrapper">
	<button class="red">Red</button>
	<button class="yellow">Yellow</button>
	<button class="video">Video</button>
	
	<div class="video-background">
	<video autoplay="" loop="">
		<source src="http://panoramic.in.ua/video/video.mp4" type="video/mp4">
	</video>
</div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.