У меня есть несколько цветовых схем для сайта. Подскажите, как можно запускать фоновое видео с помощью cookie и хранить их до нажатия на кнопку другой цветовой схемы, т.е. чтобы видео исчезало
-
А можно более подробнее... ?– NeedH8Commented 28 июл. 2017 в 17:37
-
У меня на сайте есть 4 цветовые схемы: розовая, синяя, коричневая и серая. Я хочу, чтобы при нажатии на розовую фон был розовый, аналогично с синей и коричневой), а при нажатии на серую у меня на фоне было динамическое видео. А при нажатии на другой цвет, например розовый, фон снова становился розовым. Можно реализовать это с помощью куки или есть иной способ? Спасибо)– FOXCommented 29 июл. 2017 в 8:04
Добавить комментарий
|
1 ответ
Стилизация уже будет на вашей стороне, но идея такова:
К 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>