Клиенту понравился вот этот виджет(делал
по этой инструкции)
Сайт на вордпресс, но не думаю, что это имеет сильно большое значение. Я размещаю эти блоки на
тестовую страницу
На пк все ок, как и должно быть.
1 )Видео сначала маленькое и без звука
2) на него кликаешь - оно чуть увеличивается, появляется звук, и появляется кнопка "Оставить заявку",
3) при клике на кнопку появляется поп-ап форма.
На мобильном лично у меня все точно так же. А вот у клиента и у другого человека на телефонах при клике на видео оно становится во весь экран, а кнопка появляется уже после того, как оно проиграется.
Я бы понял, если бы на сафари - с ним вечно только одни проблемы - но это у них и на хроме так.
Почему может быть у меня нормально, а у них нет? Как увидеть причину и как ее исправить,если у меня корректно отображается, а у них нет?
Может быть, что причина в id кнопки, их нежелательно дублировать, но моему андроиду это не мешает, да и просто сделать поп-ап видимым при клике - не особо сложное действие. Кнопка то не появляется у них сама по себе. а не из-за id?
Вот html на тестовой странице. Видео взято не по ссылке, как в инструкции, а из библиотеки на сайте, оно загружено.
<div class="video-widget" data-state="default">
<div class="video-widget__container">
<video id="video-widget__video" class="video-widget__video" src="https://alternative24.com.ua/wp-content/uploads/2023/04/293722837_544024700785249_2037764448503086605_n.mp4" preload="auto" autoplay="autoplay" loop="loop" muted="muted" width="300" height="150">
<source src="https://alternative24.com.ua/wp-content/uploads/2023/04/293722837_544024700785249_2037764448503086605_n.mp4" type="video/mp4" />
</video>
<div class="video-widget__close"></div>
<a id="popUpOpen" class="video-widget__button button lang_ru">Оставить заявку</a>
<a id="popUpOpenUa" class="video-widget__button button lang_ua">Залишити заявку</a>
</div>
</div>
Стили - менял только цвета и всякие мелочи типа размера шрифта, не повлияло бы я думаю,чуть удалил транзишен, чтобы вместилось в поле вопроса, на сайте не удалял
.video-widget{
position:fixed;
left:0;
z-index:999999;
bottom:0
}
.video-widget__container{
font-family:Helvetica;
z-index:999999;
overflow:hidden;
border-style:solid;
background:#eee;
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:20px;
bottom:50px;
border-radius:20px;
border-width:5px;
width:130px;
height:180px;
border-color:#fff
}
.video-widget__container:hover{
-webkit-transform:scale(1.05) translate(5px,-5px);
-moz-transform:scale(1.05) translate(5px,-5px);
-ms-transform:scale(1.05) translate(5px,-5px);
-o-transform:scale(1.05) translate(5px,-5px);
transform:scale(1.05) translate(5px,-5px);
border-color:#131344
}
.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:#fff;
-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:20px;
border-color:#fff
}
.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;
border-radius:10px;
z-index:300;
-webkit-box-shadow:rgba(0,0,0,.25) 0 4px 15px;
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-color:#70BF4F;
color:#ffffff!important;
font-size:14px;
font-family:Helvetica;
color:#000;
text-align:center;
vertical-align:middle;
line-height:35px;
opacity:0
}
.video-widget__button:hover{
background-color:#70BF4F;
text-decoration:none
}
.video-widget.video-widget[data-state=opened] .video-widget__button{
opacity:1;
visibility:visible
}
.video-widget__button {
color: #ffffff!important;
text-decoration: none;
}
@media only screen and (max-width:1023px){
.video-widget__close{
opacity:.5
}
}
@media only screen and (max-width:479px){
.video-widget__container{
left:15px;
bottom:15px;
width:90px;
height:125px
}
}
А скрипты за кинул в общий файл скриптов, внутрь того jquery, что уже есть. $ поменял на jQuery, чтобы точно-точно наверняка, а так больше ничего не менял из инструкции
jQuery(document).ready(function() {
var e = jQuery(".video-widget"),
a = document.getElementById("video-widget__video");
jQuery(".video-widget__close").click(function(t) {
return t.preventDefault(), "default" == e.attr("data-state") ? e.hide() : (e.attr("data-state", "default"), a.muted = !0), !1
}), jQuery(".video-widget__container").on("click", function(t) {
"default" == e.attr("data-state") ? (e.attr("data-state", "opened"), a.currentTime = 0, a.muted = !1) : (e.attr("data-state", "default"), a.muted = !0)
}), 1024 < jQuery(document).width() && jQuery(".video-widget__container").on("touchstart", function(t) {
"default" == e.attr("data-state") ? (e.attr("data-state", "opened"), a.currentTime = 0, a.muted = !1) : (e.attr("data-state", "default"), a.muted = !0)
}), jQuery(document).mouseup(function(t) {
e.is(t.target) || 0 !== e.has(t.target).length || "default" == e.attr("data-state") || (e.attr("data-state", "default"), a.muted = !0)
})
});
Где я не досмотрел?
Простой
