<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 100%;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
color:#ffffff;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
<A href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<script type="text/javascript">
function setIframeSource() {
var theSelect = document.getElementById('location');
var theIframe = document.getElementById('myIframe');
var theUrl;
theUrl = theSelect.options[theSelect.selectedIndex].value;
theIframe.src = theUrl;
}
</script>
<div class="lang">
<div class="video-content" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background:#abd;
border-radius:12px;
box-sizing: border-box; overflow: hidden; position: relative; touch-action: manipulation;">
<div id="embed_holder" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; touch-action: manipulation; z-index: 1;">
<div class="player-embed embed-responsive embed-responsive-16by9" style="-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background: url("https://1.bp.blogspot.com/-UnPY-Ip0J40/X2-Tp9EXBjI/AAAAAAAAAek/NsNs32tYw4w5xBN95lufxWhkha0reagtQCLcBGAsYHQ/s469/loadinggmn.gif ")50% 50% / 80px no-repeat rgba(0, 0, 0, 0);
box-sizing: border-box; height: 0px; margin: auto; max-width: 100%; overflow: hidden; padding: 0px 0px 253.688px; position: relative; touch-action: manipulation; width: 451px;">
<iframe allowfullscreen="true" frameborder="0" height="100%" id="myIframe" marginheight="0" marginwidth="0" scrolling="yes"
src="about:blank"
style="-webkit-font-smoothing: antialiased;
border-radius:px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-style: none; border-width: initial; bottom: 0px; box-sizing: border-box; height: 253.688px; left: 0px; margin: 0px; padding: 0px; position: absolute; top: 0px; touch-action: manipulation; width: 100%px; z-index: 102;" width="100%">
</iframe>
<center>
<select id="location" onchange="setIframeSource()"
style="
background-color: #189;
background-image: none;
border-color: rgb(153, 153, 153);
border-radius:4rem;
box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset;
color:#fff;
display: block;
font-family:sans-serif;
font-size: 16px;
font-stretch:sans-serif;
font-style:sans-serif;
font-variant: sans-serif;
font-weight:sans-serif;
height:50;
width: 100%;
line-height: 1.42857;
margin: auto;
padding: 6px 12px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
text-align: center;
">
<option selected style="display: none;text-align: center;" volue
="about:blank">pilih episode</option>
*/*---------------------------------------------*/*
<option value="">episode </option>
<option value="">episode </option>
<option value="">episode </option>
<option value="">episode </option>
<option value="">episode </option>
</select>
</center>
<button style="
font-size:23px;
cursor:pointer;
display:block;
background-color:#000;
color:#fff;
border-radius:8px;
margin:auto;
" onclick="openNav()">NontoN</button>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>