Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #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

    #602151

    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

    #602389

    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, 7 months ago by L-mobileGroup.
    #603770

    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

    #611799

    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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Show "big play button" as video overlay’ is closed to new replies.