Skip to content

Instantly share code, notes, and snippets.

@shrestharikesh

shrestharikesh/video-overlay-ads.html

Created June 19, 2019 04:44
Show Gist options
  • Save shrestharikesh/1cf8d6a0a42751aad394f858870d79d6 to your computer and use it in GitHub Desktop.
Save shrestharikesh/1cf8d6a0a42751aad394f858870d79d6 to your computer and use it in GitHub Desktop.
Download ZIP
overlay banner ads on HTML5 video player
Raw
video-overlay-ads.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.outer-container {
border: 1px dotted black;
width: 100%;
height: 100%;
text-align: center;
}
.inner-container {
border: 1px solid black;
display: inline-block;
position: relative;
}
.video-overlay {
position: absolute;
left: 0px;
bottom: 0px;
margin: 10px;
padding: 5px 5px;
}
.close{
position: absolute;
right: 0px;
padding-right: 10px;
transition: transform .2s;
z-index: 2;
}
.close:hover{
transform: scale(1.5);
}
img{
height:100px;
width:100%;
}
video {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<div class="video-overlay">
<div class="ad">
<div class="close" onclick="$('.ad').slideToggle();"><i class="fa fa-times" aria-hidden="true"></i></div>
<img src="https://www.marlerhaley.co.uk/Marlerhaley/media/Images/site-wide-banner.jpg?ext=.jpg"></div>
</div>
<video id="player" controls
src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" autoplay loop></video>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment