Что возможно добавить в мой код для того, чтобы при нажатии на "клик"
видео адаптировалось во весь сайт, но при этом не происходило того, что сайт необходимо скролить?
С этим вопросом мы разобрались. Смотрите на результат. Кроме этого, исправил у вас ещё ряд допущенных вами ошибок в CSS
.
Возможно ли убрать органы управления видео снизу?
Управление то убрать можно (но еще зависит от того, какой плеер вы будете использовать). Но как при этом тогда пользователь будет включать/выключать видео? К тому же, поверьте мне, это совсем плохая идея, не стоит этого делать.
let bott = document.getElementById('myBott')
bottToggle = document.getElementById('myBt')
popupClose = document.querySelector('.close')
bottToggle.onclick = () => {
bott.style.display = "block";
}
body {
margin: 20px;
padding: 20px;
font-family: "Droid Sans";
background-color: rgb(0, 0, 0);
}
.Bt {
outline: none;
flex: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000000;
background-color: rgb(255, 255, 255);
font-size: 150%;
font-weight: bold;
padding: 60px;
border-radius: 30px;
text-align: center;
}
.Bt:hover {
cursor: pointer;
color: #f0f0f0;
background: #009200;
}
.bott {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: rgb(102, 104, 104);
}
bott-content {
width: 100%;
height: 100vh;
}
.bott-body {
display: block;
position: relative;
overflow: hidden;
width: auto;
max-width: 50%;
height: 0;
max-height: 100vh;
margin: 0 auto;
margin-bottom: 15px;
padding-bottom: 56.25%;
}
.bott-body video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.copiright {
position: fixed;
left: 0;
bottom: 0;
color: #fff;
width: 100%;
}
.copiright div {
padding: 10px;
text-align: center;
background: #000000;
}
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" />
<button id="myBt" class="Bt">КЛИК</button>
<div id="myBott" class="bott">
<div class="bott-content">
<div class="bott-body">
<video controls autoplay loop>
<source src="https://i.imgur.com/leENLvB.mp4" type="video/mp4" >
</video>
</div>
</div>
</div>
<div class="copiright">
<div>
Copyright 2021 All rights reserved. Designed by Ba-Ba-Duuk
</div>
</div>
Возможно ли сделать сайт после нажатия на "клик" не кликабельным ?
И это можно сделать. Смотрите пример, как один из вариантов - просто "занавесить" его отдельным элементом. В этом случае вы убиваете двух зайцев - и страница становится недоступной для пользователя, и управление прячется, т.к. оно появляется при наведении на видео, что мы такой шторкой исключаем. Но эта идея даже больше, чем плохая. Поверьте, пользователь в этом случае достанет и вспомнит из своего словарного запаса все скверные и бранные слова и мысленно направит их вам. Не стоит этого делать.
let blocking = document.querySelector('.blocking')
let bott = document.getElementById('myBott')
bottToggle = document.getElementById('myBt')
popupClose = document.querySelector('.close')
bottToggle.onclick = () => {
bott.style.display = "block";
blocking.style.height = "100vh";
}
body {
margin: 20px;
padding: 20px;
font-family: "Droid Sans";
background-color: rgb(0, 0, 0);
}
.Bt {
outline: none;
flex: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000000;
background-color: rgb(255, 255, 255);
font-size: 150%;
font-weight: bold;
padding: 60px;
border-radius: 30px;
text-align: center;
}
.Bt:hover {
cursor: pointer;
color: #f0f0f0;
background: #009200;
}
.bott {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: rgb(102, 104, 104);
}
bott-content {
width: 100%;
height: 100vh;
}
.bott-body {
display: block;
position: relative;
overflow: hidden;
width: auto;
max-width: 50%;
height: 0;
max-height: 100vh;
margin: 0 auto;
margin-bottom: 15px;
padding-bottom: 56.25%;
}
.bott-body video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.copiright {
position: fixed;
left: 0;
bottom: 0;
color: #fff;
width: 100%;
}
.copiright div {
padding: 10px;
text-align: center;
background: #000000;
}
.blocking {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.5);
transition: height 5s;
}
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" />
<button id="myBt" class="Bt">КЛИК</button>
<div id="myBott" class="bott">
<div class="bott-content">
<div class="bott-body">
<video controls autoplay loop>
<source src="https://i.imgur.com/leENLvB.mp4" type="video/mp4" >
</video>
</div>
</div>
</div>
<div class="copiright">
<div>
Copyright 2021 All rights reserved. Designed by Ba-Ba-Duuk
</div>
</div>
<div class="blocking"></div>