<style>

#sto_overlay{
background-color: rgb(0, 0, 0);
border: 0;
height: 100%;
left: 0px;
margin: 0px;
opacity: 0.8;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 2147483601;
}
.embed-responsive {
top: -20px;
}
.sound {
font-size: 2em;
position: absolute;
color: #fff;
padding: 10px;
right: 0;
cursor: pointer;
z-index: 1000;
top: 40px;
}

#politeload {
left:0;
right:0;
margin:0 auto;
position:absolute;
top:260px;
}

#pop {
/*max-width: 780px;
width: 100%;*/
}

#cta {
bottom: 10%;
cursor: pointer;
position: absolute;
z-index: 999;
height: 80%;
width:100%;
}
#cta a {
display: block;
width: 100%;
height: 100%;
}
#cta a:hover {
/*background:rgba(0,0,0,0) url([%CTAButton%]) bottom center no-repeat;*/
-webkit-transition: initial;
-o-transition: initial;
transition: initial;
 -moz-transition: initial;
-ms-transition: initial;
}
.video-hover {
background-color: rgba(0, 0, 0, .8);
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
display: none;
}
.video-hover.hover {
display:block !important;
}

#my_close_btn{
max-width:780px;
margin:0 auto 0 -10px;
height:0;width:100%;
text-align:right;
padding:0;
z-index: 99999999999999;
position: relative;
}
.popup-video-container {
display: none;
}
.video {
position: relative;
top: -40px;
}
@media only screen and (min-width: 801px) {
.parent-wrapper {
margin: 0 auto;
width: 810px !important;
}
#my_close_btn {
padding:0 !important;
}
}
@media (max-width: 800px) {
#my_close_btn{
padding:0 0 10px;
}
}

@media only screen and (min-width: 768px) {

.parent-wrapper {
width: 100%;
}

.video-wrapper {
margin: 15px;
}
#my_close_btn {
padding:0 15px;
}
}
@media (max-width: 736px) {
#pop {
width: 65%;
}
}

@media (max-width: 732px) {

#pop {
width: 65%;
}
}

@media (max-width: 640px) {

#pop {
width: 60%;
}
}

@media (max-width: 568px) {

#pop {
top: 15px !important;
width: 60%;
}
}

@media (max-width: 480px) {

#pop {
top: 15px !important;
width: 100%;
}
}

@media only screen and (max-width: 736px) {

#politeload {
top:60px;
}
.embed-responsive.embed-responsive-custom {
min-height: 580px;
}
.popup-video-container #video-placeholder video {
height: 620px;
position: relative;
left: 0;
right: 0;
}
}

@media (max-width: 320px) {

#pop {
top: 15px !important;
width: 100%;
}
#my_close_btn {
margin: 0 0 10px 20px;
padding: 0 0 10px;
width: 24px;
height: 24px;
position: absolute;
right: 0;
 z-index: 2147483603;
}
.parent-wrapper {
margin-top: 10px;
}
.embed-responsive.embed-responsive-custom {
min-height: 423px;
}
.popup-video-container #video-placeholder video {
height: 495px;
}
}
</style>

<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

<script src="https://s3-ap-southeast-
1.amazonaws.com/tesuploads/Hermes/js/detectmobilebrowser.js"></script>
<div class="popup-video-container">
<div id="my_sto_overlay">
<div id="sto_overlay">
<span id="politeload">
<img src="http://advertisement.bizedge.com/www/images/ads/ad-
scripts/balls.svg"
onerror="this.src='http://advertisement.bizedge.com/www/images/ads/ad-
scripts/loader.gif'" alt="">
</span>
</div>
</div>

<div id="pop">
<div id="my_close_btn">
<img width="23" height="24" id="btn_close" style="cursor:pointer;z-
index:1;display:none;" src="https://s3-ap-southeast-
1.amazonaws.com/tesuploads/Hermes/images/close_btn_x.png" alt="" />
</div>
<div class="parent-wrapper">
<div class="video-wrapper">
<div class="embed-responsive embed-responsive-custom">
<div class="sound"><i id="mute-toggle" class="material-
icons">volume_off</i></div>
<div class="video">
<div class="video-hover"></div>
<div id="cta">
<a href="%%CLICK_URL_UNESC%%%%DEST_URL%%"
target="_blank"></a>
</div>
<div id="video-placeholder">
<video id="popup-video" width="100%" height="" autoplay
controls muted playsinline poster="https://s3-ap-southeast-
1.amazonaws.com/tesuploads/Hermes/images/Kiss_415x537_EN_5Mo_compressed.gif">
<source src="https://s3-ap-southeast-
1.amazonaws.com/tesuploads/Hermes/video/Kiss_415x537_EN_5Mo.mp4" type="video/mp4">
<source src="https://s3-ap-southeast-
1.amazonaws.com/tesuploads/Hermes/video/Kiss_415x537_EN_5Mo.ogv" type="video/ogg">
<source src="https://s3-ap-southeast-
1.amazonaws.com/tesuploads/Hermes/video/Kiss_415x537_EN_5Mo.webm"
type="video/webm">
</video>
</div>
 </div>
</div>
</div>
</div>
</div>
</div>

<script>
window.onload = function() {
postloader();
};

function postloader(){
jQuery ('#politeload').hide();
jQuery ('#btn_close').show(600);
}

jQuery (document).ready(function(){
jQuery ("#popup-video")[0].autoplay = true;
jQuery ('#pop').css({'margin':'0
auto','position':'fixed','right':'0','top':'35px','left':'0','z-
index':'2147483602','text-align':'center',"display":"block","max-width":"810px"});
jQuery ("#pop .flow-wrapper").css({'margin-top':'20px'});

jQuery ("#btn_close,#sto_overlay").click(function(){
jQuery ('#pop,#sto_overlay').fadeOut();
});
})

// mute video
jQuery("#popup-video").prop('muted', true);

jQuery("#mute-toggle").click( function (){

jQuery(this).text(function(i, v){
return v === 'volume_up' ? 'volume_off' : 'volume_up'
})
if( jQuery("#popup-video").prop('muted') ) {
jQuery("#popup-video").prop('muted', false);
} else {
jQuery("#popup-video").prop('muted', true);
}
});

// when video ends

jQuery(document).ready(function(){
jQuery('#popup-video').on('ended',function(){
jQuery('#pop,#sto_overlay').fadeOut();
});
});

// clickTag
jQuery('.cta_popup').click(function(){
window.open('%%CLICK_URL_UNESC%%%%DEST_URL%%', '_blank');
});

/************************Start Tracking Code*******************************/

 var playlock = true;
var total, current, percent, intervar;
var steplocker = 0;
var videoid = document.getElementById("popup-video");
jQuery("#popup-video").bind('play', function() {
if (playlock) {
playlock = false;
total = videoid.duration;
intervar = setInterval(watch, 500);
}
ga('send', 'event', 'EdgeSingaporeVideo', 'Play', 'popup hermes kiss', '1');
});
jQuery("#popup-video").bind('ended', function() {
ga('send', 'event', 'EdgeSingaporeVideo', 'Complete', 'popup hermes kiss',
'1');
clearInterval(intervar);
});
jQuery("#popup-video").bind('pause', function() {
isPause = true;
ga('send', 'event', 'EdgeSingaporeVideo', 'Pause', 'popup hermes kiss', '1');
});
jQuery('#popup-video').bind('mute', function() {
muted = true;
ga('send', 'event', 'EdgeMarketsVideo', 'Mute', 'popup hermes flatiron', '1');
});

function watch() {
current = videoid.currentTime;
percent = Math.round((current / total) * 100);
if ((percent > 75) && (steplocker == 2)) {
//write the GA event for 75%
steplocker = 3;
ga('send', 'event', 'EdgeSingaporeVideo', '75', 'popup hermes kiss', '1');

} else if ((percent > 50) && (steplocker == 1)) {

//write the GA event for 50%
steplocker = 2
ga('send', 'event', 'EdgeSingaporeVideo', '50', 'popup hermes kiss', '1');

} else if ((percent > 25) && (steplocker == 0)) {

//write the GA event for 25%
steplocker = 1;
ga('send', 'event', 'EdgeSingaporeVideo', '25', 'popup hermes kiss', '1');
}
}

/************************End Tracking Code*******************************/

/************************START MOBILE ONLY*******************************/

// var isiPad = /ipad/i.test(navigator.userAgent.toLowerCase());
// var isAndroid = /android/i.test(navigator.userAgent.toLowerCase());
// var isWindowsPhone = /windows
phone/i.test(navigator.userAgent.toLowerCase());
// var isBlackBerry =
/blackberry/i.test(navigator.userAgent.toLowerCase());

jQuery(function() {
 // if((jQuery.browser.mobile) || (isiPad) || (isAndroid) ||
(isWindowsPhone) || (isBlackBerry)) {
if(jQuery.browser.mobile) {
jQuery('.popup-video-container').css({'display':'block'});
//console.log('This is A MOBILE browser');
} else {
jQuery('.popup-video-container').hide();
//console.log('This is NOT MOBILE browser');
};
})

/************************End MOBILE ONLY*******************************/

</script>