Custom URL for Header Video

[fbotha]

Good Day

On the bundled theme Twenty Seventeen Version: 1.4.

You are only able to upload a video under the Appearance / Customize / Header Media section.

This results in video content being served from the Base URL.

i.e.

<script type='text/javascript'>var _wpCustomHeaderSettings = {"mimeType":"video\/mp4","posterUrl":"","videoUrl":"https:\/\/www.stratuscloud.co.za\/wp-content\/uploads\/2017\/06\/Flying.mp4","width":"2000","height":"1200","minWidth":"900","minHeight":"500","l10n":{"pause":"<span class=\"screen-reader-text\">Pause background video<\/span><svg class=\"icon icon-pause\" aria-hidden=\"true\" role=\"img\"> <use href=\"#icon-pause\" xlink:href=\"#icon-pause\"><\/use> <\/svg>","play":"<span class=\"screen-reader-text\">Play background video<\/span><svg class=\"icon icon-play\" aria-hidden=\"true\" role=\"img\"> <use href=\"#icon-play\" xlink:href=\"#icon-play\"><\/use> <\/svg>","pauseSpeak":"Video is paused.","playSpeak":"Video is playing."}};</script>

Thus it does not currently seem possible to serve the video from a CDN.

​https://cdn.stratuscloud.co.za/wp-content/uploads/2017/06/Flying.mp4

vs

​https://www.stratuscloud.co.za/wp-content/uploads/2017/06/Flying.mp4

Is it possible to override this value on database or file level or would this require an additional feature to be added to the Theme?

[fbotha]

Header Media - Video

[sabernhardt]

Hi and welcome to Trac!

I have not found a way to change the base URL within the Customizer. If you choose a video in your Media Library, it saves the attachment ID, and the custom URL field expects a YouTube link.

Using the get_header_video_url filter, you could edit the (attachment) video's URL in a custom plugin (or functions.php). If you have a plugin for CDN images, it might automatically adjust the video URL by now, too.

[karmatosed]

@sabernhardt if I am correct this wouldn't get fixed in the theme - or is that my mistake in reading your feedback here?

[sabernhardt]

This should not be exclusive to Twenty Seventeen.

• The theme uses the_custom_header_markup() in template-parts/header/header-image.php.
• I did not find any theme customizations for header video except for the play/pause button settings in twentyseventeen_video_controls().
• The YouTube option is part of WP_Customize_Manager::register_controls().

Maybe the Core functions could be updated to support other custom URLs (ticket:38172#comment:44), but the filter could suffice (at least for now).

add_filter( 'get_header_video_url', 'wptrac43363_get_header_video_url', 1 );
function wptrac43363_get_header_video_url( $url ) {
	$new = str_replace( 'localhost', 'example.com', $url ); // in your example, you would want str_replace( 'www.', 'cdn.', $url );
	return $new;
}

edits the videoUrl variable

<script id="wp-custom-header-js-extra">
var _wpCustomHeaderSettings = {"mimeType":"video\/mp4","posterUrl":"http:\/\/localhost\/svn\/src\/wp-content\/uploads\/coffee-1.jpg","videoUrl":"http:\/\/example.com\/svn\/src\/wp-content\/uploads\/small-video2.mp4","width":"2000","height":"1200","minWidth":"900","minHeight":"500","l10n":{"pause":"<span class=\"screen-reader-text\">Pause background video<\/span><svg class=\"icon icon-pause\" aria-hidden=\"true\" role=\"img\"> <use href=\"#icon-pause\" xlink:href=\"#icon-pause\"><\/use> <\/svg>","play":"<span class=\"screen-reader-text\">Play background video<\/span><svg class=\"icon icon-play\" aria-hidden=\"true\" role=\"img\"> <use href=\"#icon-play\" xlink:href=\"#icon-play\"><\/use> <\/svg>","pauseSpeak":"Video is paused.","playSpeak":"Video is playing."}};
</script>