I'm currently facing an issue with adding text above a GIF on a video play button specifically for mobile devices. The custom play button is necessary because no mobile device supports video autoplay. I've tried various methods to display the text "Click on the gif to start" on top of the GIF but haven't been successful. Can someone please provide some guidance on how to achieve this?
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>