Show "big play button" as video overlay - Support | Kriesi.at

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
March 22, 2016 at 5:34 pm #602021

L-mobileGroup
Participant

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 #602151

Vinay
Inactive Moderator

Hey 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 Kashyap

March 23, 2016 at 8:50 am #602389
L-mobileGroup
Participant
Thanx 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, 9 months ago by L-mobileGroup.
March 26, 2016 at 6:02 am #603770
Ismael
Moderator
Hey!

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,
Ismael
April 12, 2016 at 11:16 am #611799
L-mobileGroup
Participant
Dear 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
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Show "big play button" as video overlay’ is closed to new replies.