Круглое видео в углу, которое можно развернуть. Помнит закрытие в cookie.
<!-- Вставка видео и настройки -->
<div class="video-widget" data-state="default">
<div class="video-widget__container">
<video
id="video-widget__video"
loop=""
autoplay=""
playsinline=""
preload="auto"
muted="muted"
controlslist="nodownload"
disablepictureinpicture=""
class="video-widget__video"
src="https://dl.dropboxusercontent.com/s/scl/fi/odqb0j6cg74lplpm8j9mx/IMG_5973.mp4?rlkey=2mhhbslcw9tfhu5o3ducnrge8&dl=0"
>
</video>
<div class="video-widget__close"></div>
<a
class="video-widget__button t-title"
target="page"
href="#consult"
>
Бесплатная консультация
</a>
</div>
</div>
<!-- JavaScript -->
<script>
jQuery.cookie = function (name, value, options) {
if (typeof value != 'undefined') {
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + options.expires * 24 * 60 * 60 * 1000);
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString();
}
var path = options.path ? '; path=' + options.path : '';
var domain = options.domain ? '; domain=' + options.domain : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == name + '=') {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
function nolimvideowidgetcookie() {
$.cookie('nlvideowidget31043704', 1, { expires: -1 });
}
$(document).ready(function () {
var e = $(".video-widget"),
a = document.getElementById("video-widget__video");
$(".video-widget__close").click(function (t) {
t.preventDefault();
if (e.attr("data-state") === "default") {
e.hide();
} else {
e.attr("data-state", "default");
a.muted = true;
}
return false;
});
$(".video-widget__container").on("click", function (t) {
if (e.attr("data-state") === "default") {
e.attr("data-state", "opened");
a.currentTime = 0;
a.muted = false;
} else {
e.attr("data-state", "default");
a.muted = true;
}
});
$(document).mouseup(function (t) {
if (!e.is(t.target) && e.has(t.target).length === 0 && e.attr("data-state") !== "default") {
e.attr("data-state", "default");
a.muted = true;
}
});
$('.video-widget__close, .video-widget__button').click(function (e) {
nolimvideowidgetcookie();
});
if (Number($.cookie('nlvideowidget31043704')) > 0) {
$(".video-widget").hide();
} else {
$(".video-widget").show();
}
});
</script>
<!-- Стили -->
<style>
.video-widget {
display: none;
position: fixed;
left: 0;
z-index: 999999;
bottom: 0;
}
.video-widget__container {
font-family: Montserrat;
z-index: 999999;
overflow: hidden;
border-style: solid;
background: #eee;
-webkit-transition: width .3s ease-in-out 0s, height .3s ease-in-out 0s, bottom .3s ease-in-out 0s, border-color .2s ease-in-out 0s, opacity 1s ease-in-out 0s, -webkit-transform .2s ease-in-out 0s;
transition: width .3s ease-in-out 0s, height .3s ease-in-out 0s, bottom .3s ease-in-out 0s, border-color .2s ease-in-out 0s, opacity 1s ease-in-out 0s, -webkit-transform .2s ease-in-out 0s;
-o-transition: width .3s ease-in-out 0s, height .3s ease-in-out 0s, bottom .3s ease-in-out 0s, border-color .2s ease-in-out 0s, opacity 1s ease-in-out 0s, -o-transform .2s ease-in-out 0s;
-moz-transition: transform .2s ease-in-out 0s, width .3s ease-in-out 0s, height .3s ease-in-out 0s, bottom .3s ease-in-out 0s, border-color .2s ease-in-out 0s, opacity 1s ease-in-out 0s, -moz-transform .2s ease-in-out 0s;
transition: transform .2s ease-in-out 0s, width .3s ease-in-out 0s, height .3s ease-in-out 0s, bottom .3s ease-in-out 0s, border-color .2s ease-in-out 0s, opacity 1s ease-in-out 0s;
transition: transform .2s ease-in-out 0s, width .3s ease-in-out 0s, height .3s ease-in-out 0s, bottom .3s ease-in-out 0s, border-color .2s ease-in-out 0s, opacity 1s ease-in-out 0s, -webkit-transform .2s ease-in-out 0s, -moz-transform .2s ease-in-out 0s, -o-transform .2s ease-in-out 0s;
outline: 0;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-box-shadow: rgba(0, 0, 0, .2) 0 10px 20px;
box-shadow: rgba(0, 0, 0, .2) 0 10px 20px;
position: absolute;
left: 25px;
bottom: 25px;
border-radius: 10px;
border-width: 2px;
width: 130px;
height: 180px;
border-color: #ffffff;
}
.video-widget__container:hover {
-webkit-transform: scale(1.1) translate(5px, -5px);
-moz-transform: scale(1.1) translate(5px, -5px);
-ms-transform: scale(1.1) translate(5px, -5px);
-o-transform: scale(1.1) translate(5px, -5px);
transform: scale(1.1) translate(5px, -5px);
border-color: #ffffff;
}
.video-widget__video {
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
z-index: 200;
-webkit-transition: opacity .4s ease-in-out 0s;
-o-transition: opacity .4s ease-in-out 0s;
-moz-transition: opacity .4s ease-in-out 0s;
transition: opacity .4s ease-in-out 0s;
opacity: .9;
}
.video-widget__close {
position: absolute;
top: 6px;
right: 6px;
width: 20px;
height: 20px;
z-index: 250;
opacity: 0;
-webkit-transition: opacity .2s ease-in-out 0s, -webkit-transform .3s ease-in-out 0s;
transition: opacity .2s ease-in-out 0s, -webkit-transform .3s ease-in-out 0s;
-o-transition: opacity .2s ease-in-out 0s, -o-transform .3s ease-in-out 0s;
-moz-transition: transform .3s ease-in-out 0s, opacity .2s ease-in-out 0s, -moz-transform .3s ease-in-out 0s;
transition: transform .3s ease-in-out 0s, opacity .2s ease-in-out 0s;
transition: transform .3s ease-in-out 0s, opacity .2s ease-in-out 0s, -webkit-transform .3s ease-in-out 0s, -moz-transform .3s ease-in-out 0s, -o-transform .3s ease-in-out 0s;
}
.video-widget__close:after, .video-widget__close:before {
position: absolute;
left: 9px;
top: 1px;
content: "";
height: 18px;
width: 2px;
background: ;
-webkit-box-shadow: rgba(0, 0, 0, .5) 1px 1px 10px;
box-shadow: rgba(0, 0, 0, .5) 1px 1px 10px;
}
.video-widget__close:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.video-widget__close:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.video-widget__container:hover .video-widget__close {
opacity: .5;
}
.video-widget.video-widget[data-state=opened] .video-widget__container {
width: 280px;
height: 500px;
border-radius: 10px;
border-color: #ffffff;
}
.video-widget.video-widget[data-state=opened] .video-widget__close {
opacity: .5;
}
.video-widget.video-widget[data-state=opened] .video-widget__close:before {
display: none;
}
.video-widget.video-widget[data-state=opened] .video-widget__close:after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg)
}
.video-widget.video-widget[data-state=opened] .video-widget__close:hover {
opacity: 1;
}
.video-widget__button {
position: absolute;
bottom: 20px;
right: 20px;
left: 20px;
height: 65px;
border-radius: 0px;
z-index: 300;
-webkit-box-shadow: rgba(0, 0, 0, .25) 0 4px 15px;
text-align: center;
-webkit-transition: opacity .3s ease-in-out 0s, background-color .2s ease-in-out 0s, -webkit-transform .2s ease-in-out 0s;
transition: opacity .3s ease-in-out 0s, background-color .2s ease-in-out 0s, -webkit-transform .2s ease-in-out 0s;
-o-transition: opacity .3s ease-in-out 0s, background-color .2s ease-in-out 0s, -o-transform .2s ease-in-out 0s;
-moz-transition: transform .2s ease-in-out 0s, opacity .3s ease-in-out 0s, background-color .2s ease-in-out 0s, -moz-transform .2s ease-in-out 0s;
transition: transform .2s ease-in-out 0s, opacity .3s ease-in-out 0s, background-color .2s ease-in-out 0s;
transition: transform .2s ease-in-out 0s, opacity .3s ease-in-out 0s, background-color .2s ease-in-out 0s, -webkit-transform .2s ease-in-out 0s, -moz-transform .2s ease-in-out 0s, -o-transform .2s ease-in-out 0s;
visibility: hidden;
background: #1AD060;
box-shadow: 4px 4px 0px 0px #16B353;
font-family: Circe;
font-size: 16px;
font-weight: 600;
color: #ffffff !important;
/*text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);*/
text-align: center;
vertical-align: middle;
line-height: 65px;
/*text-transform: uppercase;*/
opacity: 0
}
@media screen and (max-width: 480px) {
.video-widget__button {
font-size: 16px;
}
}
.video-widget__button:hover {
background-color: #18cef2;
text-decoration: none;
}
.video-widget.video-widget[data-state=opened] .video-widget__button {
opacity: 1;
visibility: visible;
}
@media only screen and (max-width:1023px) {
.video-widget__close {
opacity: .5;
}
}
@media only screen and (max-width:480px) {
.video-widget__container {
left: 15px;
bottom: 15px;
width: 90px;
height: 125px;
}
}
</style>Скрипту нужен jQuery и плагин cookie.