Make WordPress Core

Opened 6 years ago

Last modified 7 days ago

#43363 new feature request

Custom URL for Header Video

Reported by: fbotha's profile fbotha Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.9.4
Component: Themes Keywords: dev-feedback
Focuses: Cc:

Description

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?

Attachments (1)

Header_Media.PNG (28.6 KB) - added by fbotha 6 years ago.
Header Media - Video

Download all attachments as: .zip

Change History (6)

@fbotha
6 years ago

Header Media - Video

#1 @SergeyBiryukov
6 years ago

  • Summary changed from Twenty Seventeen Theme - Custom URL for Header Video to Twenty Seventeen: Custom URL for Header Video

#2 @sabernhardt
3 years ago

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.

#3 @karmatosed
8 days ago

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

#4 @karmatosed
8 days ago

  • Keywords dev-feedback added

#5 @sabernhardt
7 days ago

  • Component changed from Bundled Theme to Themes
  • Summary changed from Twenty Seventeen: Custom URL for Header Video to Custom URL for Header Video

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>
Note: See TracTickets for help on using tickets.