-
AuthorPosts
-
March 22, 2016 at 5:34 pm #602021
Dear Support
can`t find a solution to show the “big play button” overlay on videos. The button is visible in the backend. As example want to show it there https://projects.l-mobile.com/video/ How to make it visible via css?
Thanks in advance Marc
March 22, 2016 at 9:57 pm #602151Hey L-mobileGroup!
This is more a youtube issue than anything to do with a theme but as always we are more than happy to help you please setup a custom thumbnail image for the video in youtube as mentioned in this link https://support.google.com/youtube/answer/72431?hl=en
Best regards,
Vinay KashyapMarch 23, 2016 at 8:50 am #602389Thanx Vinay
but this is not the issue…Video is not hosted via youtube. Also in the backend the button is visible as overlay at the video without thumbnail picture. I have attached y image from the media backend. I have marked it. There should be a way to make it visible at the frontend?
Best Regards Marc
- This reply was modified 8 years, 7 months ago by L-mobileGroup.
March 26, 2016 at 6:02 am #603770Hey!
Please try this code in the functions.php file:
// video play button add_action('wp_footer', 'ava_custom_script'); function ava_custom_script(){ ?> <script type="text/javascript"> (function($) { function d() { var $mejs = $('.mejs-container'); $mejs = $('.mejs-container').addClass('video-button-overlay'); $('.avia-video').on('click', function() { function vremoveClass(e) { $mejs.removeClass('video-button-overlay') } function vaddClass(e) { $mejs.addClass('video-button-overlay') } if ($mejs.hasClass('video-button-overlay')) { vremoveClass(); } else { vaddClass(); } }); } d(); })(jQuery); </script> <?php }
And this code in the Quick CSS or style.css file:
.video-button-overlay:before { content: url('PLAY BUTTON URL HERE'); display: block; width: 20px; height: 20px; z-index: 10000; position: absolute; overflow: hidden; left: 30%; top: 40%; }
Adjust the values according to the play button image size and add the correct image url in content property.
Best regards,
IsmaelApril 12, 2016 at 11:16 am #611799Dear Ismael
thanx for your reply. Found now the time to test it. Doesn`t work, receive after I change the functions a 500 server error. But your answer helped to solve the problem. Button is always loaded but not visible. I added via css
div .mejs-overlay-button { z-index: 1000; background: url(bigplay.svg) no-repeat; }
with this css change the button is always visible. Thanx for support Marc
-
AuthorPosts
- The topic ‘Show "big play button" as video overlay’ is closed to new replies.