[Support request] Uploading mp4 on media library causes several errors

[George]

Hello,
According to Google’s recommendations, I’m trying to set up an MP4 to replace my current GIf logo. However, several issues occur, discussed in detail here:
https://nimb.ws/734xkW

[Leo]

Hi George,

Hmm this doesn’t sound like a theme issue to me – it’s very uncommon to use mp4 as the logo.

Do you get the same issues when using a Twenty series WP default theme?

Let me know 🙂

[George]

Hello, yes, it is uncommon, but why shouldn’t it work? When I upload either mp4 or webm using the 23 theme’s media library the files do show on the media library (unlike GP) but it still won’t allow me to choose it as a logo on the customizer. Is there a way to bypass this restriction?

[David]

Hi there,

GP doesn’t interfere with how the Media Library operates or the how it appends a media attachment to the site identity. Those are core functions.

The issue is with how WP treats MP4 media files.
For one it does not support them in the Site Identity, it expects there to be a image mime type.

If you want to add a MP4 as the logo then you can try using the generate_logo_output filter – see here:

https://docs.generatepress.com/article/generate_logo_output/

The example: “Adding New Class” would be one to follow.

And then you would need to replace the img %3$s /> with your video html:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

[George]

Hi Dave,

I tried to follow your instructions (even though I’m generally clueless with coding) and I added this PHP code with code snippets:

add_filter( 'generate_logo_output', 'tu_logo_class', 10, 3 );
function tu_logo_class( $output, $logo_url, $html_attr ) {
	printf(
		'<div class="site-logo MY-CUSTOM-CLASS">
			<a href="%1$s" title="%2$s" rel="home">
				<video style="max-width: 100%; max-height: 60px; object-fit: cover;" autoplay loop muted playsinline>
        			<source src="http://privetalk.com/wp-content/uploads/2023/03/PriveTalk-logo-Animated-400-×-251-px-WEBM-1.webm" type="video/webm">
        			<source src="http://privetalk.com/wp-content/uploads/2023/03/PriveTalk-logo-Animated-400-×-251-px-5.mp4" type="video/mp4">
    			</video>
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
	);
}

However, I still can’t make the animated logos appear (either the webm or the mp4 versions, nor can I select it when browsing at customizer’s logo media. https://privetalk.com/

What am I doing wrong? Thank you

[George]

add_filter( 'generate_logo_output', 'tu_logo_class', 10, 3 );
function tu_logo_class( $output, $logo_url, $html_attr ) {
	printf(
		'<div class="site-logo MY-CUSTOM-CLASS">
			<a href="%1$s" title="%2$s" rel="home">
				<video style="max-width: 100%; max-height: 60px; object-fit: cover;" autoplay loop muted playsinline>
        			<source src="http://privetalk.com/wp-content/uploads/2023/03/PriveTalk-logo-Animated-400-×-251-px-WEBM-1.webm" type="video/webm">
        			<source src="http://privetalk.com/wp-content/uploads/2023/03/PriveTalk-logo-Animated-400-×-251-px-5.mp4" type="video/mp4">
    			</video>
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
	);
}

[Fernando]

Hi George,

I think your site’s Header is built through Elementor.

That filter won’t work if so.

You’ll need to find a way to make it work with Elementor or use the default GP Header instead with that filter.

[Author]

Posts