mercredi 28 mars 2018

How Can I make a button clickable in video full screen

I have a wordpress page and html5 video and a paypal donation widget I want to make it clickable when in fullscreen I have already made it visible and clickable when not in fullscreen but when in fullscreen and i click on it it just plays the video here is the page: http://theposturesaver.com/bretching-video/ here is the page code:

<div style="width: 50%; float: left;">
<h6>Please make sure to watch the video in its entirety at least once . This will ensure that you will enjoy all the benefits of this powerful therapeutic technique</h6>
[video width="640" height="360" mp4="http://theposturesaver.com/wp-content/uploads/2018/03/Bretching.mp4" id="myVideo" controls="controls"][/video]
<div class="btd" style="width: 150px; text-align: center; display: none; position: absolute; margin-top: -370px; margin-left: 200px; z-index: 2147483647;"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="cmd" type="hidden" value="_s-xclick" />
<input name="hosted_button_id" type="hidden" value="5TKNPWWBH73VL" />
<p style="color: white; font-weight: bold; width: 550px; margin-left: -170px; font-size: 15px;">OUR PROJECT CANNOT BE SUCCESSFUL WITHOUT YOUR HELP, WE ARE HONORED THAT YOU ARE CONSIDERING MAKING A CONTRIBUTION.</p>
<input alt="PayPal - The safer, easier way to pay online!"  type="image" src="http://www.freepngimg.com/download/paypal_donate_button/8-2-paypal-donate-button-high-quality-png.png" value="submit" />
<img src="http://www.freepngimg.com/download/paypal_donate_button/8-2-paypal-donate-button-high-quality-png.png" alt="" width="1" height="1" border="0" />

<h6 style="color: white; width: 550px; margin-left: -170px;">WHEN YOU ARE GOOD TO OTHERS YOU ARE BEST TO YOURSELF</h6>
</form></div>




<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
    /*<![CDATA[*/ $(document).ready(function(){ $('video').on('ended',function(){ 
if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
$('.btd').css('margin-top', '-235px');
$('.btd').css('margin-left', '500px');
}
else{
$('.btd').css('margin-top', '-370px');
$('.btd').css('margin-left', '200px');
}
$('.btd').css('display','block'); $('video').css('opacity','0'); }); $('video').on('pause',function(){ 
if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
$('.btd').css('margin-top', '-235px');
$('.btd').css('margin-left', '500px');
}
else{
$('.btd').css('margin-top', '-370px');
$('.btd').css('margin-left', '200px');
}
$('.btd').css('display','block'); $('video').css('opacity','0'); }); $('video').on('play', function() { 
if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
$('.btd').css('margin-top', '-235px');
$('.btd').css('margin-left', '500px');
}
else{
$('.btd').css('margin-top', '-370px');
$('.btd').css('margin-left', '200px');
}
$('.btd').css('display','none'); $('video').css('opacity','1'); }); }); /*]]>*/
$('video').on('mouseover', function(){
if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
$('.btd').css('margin-top', '-235px');
$('.btd').css('margin-left', '500px');
}
else{
$('.btd').css('margin-top', '-370px');
$('.btd').css('margin-left', '200px');
}
})
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(){
if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
$('.btd').css('margin-top', '-235px');
$('.btd').css('margin-left', '500px');
}
else{
$('.btd').css('margin-top', '-370px');
$('.btd').css('margin-left', '200px');
}
})
</script>

</div>




Aucun commentaire:

Enregistrer un commentaire