I have a page with a video and it's having a custom play button for mobiles devices since no mobile device supports video autoplay. I have used a gif as custom play button. All want todo now is to add text saying "Click on the gif to start" on the top of the gif, only on mobile devices. I have tried several methods but none helped. Someone please help!
document.getElementById('myVideo').addEventListener('ended', function() {
window.location.href = 'http://www.vvvv.com/index_home.html';
}, false);
$('.video').parent().click(function() {
if ($(this).children(".video").get(0).paused) {
$(this).children(".video").get(0).play();
$(this).children(".playpause").fadeOut();
} else {
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
@media only screen and (max-width: 1000px){
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 110%;
overflow-y: hidden;
overflow: hidden;
}
.wrapper{
display:table;
width:auto;
position:relative;
}
.playpause {
background-color: white;
background-image:url("https://cdn3.iconfinder.com/data/icons/iconic-1/32/play_alt-512.png");
background-repeat:no-repeat;
width:100%;
height:110%;
position:absolute;
left:0%;
right:0%;
top:0%;
bottom:0%;
margin:auto;
background-size:contain;
background-position: center;
}
}
@media only screen and (min-width: 1021px) and (max-width : 2700px){
body {
height: 100%;
overflow-y: hidden;
}
.video {
object-fit: cover;
width: 100%;
border: 1px solid black;
}
.wrapper{
width:100%;
height:100%;
}
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<video class="video" id="myVideo" autoplay="autoplay" controls="controls">
<source src="intro.mp4" />
</video>
<div class="playpause"></div>
</div>
</body>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
