SOLVED: YT Video Improvement: Change default API preview image quality

Feature Requests / Improvements
1

Hi,

Is there a possibility to change the default YouTube API preview image quality? Something like WP Rocket has: Choose YouTube preview image resolution - WP Rocket Knowledge Base

Thanks

3 Likes
2

UPDATE

Iā€™ve checked the video element code and here is the part used for chosing the video thumbnail:

// STEP: Get YouTube video preview image from API
if ( $video_type === 'youtube' ) {
     return "https://img.youtube.com/vi/{$settings['youTubeId']}/hqdefault.jpg";
}

So, there is no way to change the thumbnail quality except editing the code directly.

It would be really handy to add there a possibility to change the quality. At least via filter, ideally in UI.

The simple filter could look something like this:

// STEP: Get YouTube video preview image from API
if ( $video_type === 'youtube' ) {
    $thumbnail_resolution = apply_filters( 'bricks/youtube_thumbnail_resolution', 'hqdefault' );
    return "https://img.youtube.com/vi/{$settings['youTubeId']}/{$thumbnail_resolution}.jpg";
}

And yes, Iā€™m aware this could lead to possible issues, since some of the resolutions might not be available. If using the UI, there should be some info about it there.

Iā€™m making this a feature request now. Thanks for considering itā€¦

3

My client was very unhappy when the Preview image by Default API is completely pixelated in full width containerā€¦ Bricks uses a 480x360 hqdefault resolution, which is good for mobile devices, but definitely not for desktops. For 1280x720, you just need to change: return ā€œhttps://img.youtube.com/vi/{$settings[ā€˜youTubeIdā€™]}/hqdefault.jpgā€;
in to:
return ā€œhttps://img.youtube.com/vi/{$settings[ā€˜youTubeIdā€™]}/maxresdefault.jpgā€;

@thomas @Matej I think itā€™s not too hard to provide a filter or option?

My solution, but I need confirmation if this is a good approach?:

/**

  • Replace YouTube hqdefault thumbnails with maxresdefault in rendered output
  • Add this to your child themeā€™s functions.php
    */
    add_filter( ā€˜bricks/frontend/render_dataā€™, ā€˜replace_youtube_thumbnail_qualityā€™, 10, 3 );

function replace_youtube_thumbnail_quality( $content, $post, $area ) {
// Only process if content contains YouTube thumbnails
if ( strpos( $content, ā€˜img.youtube.com/vi/ā€™ ) === false ) {
return $content;
}

// Replace hqdefault.jpg with maxresdefault.jpg
$content = str_replace(
    '/hqdefault.jpg',
    '/maxresdefault.jpg',
    $content
);

return $content;

}

4

Hi @drigis3,

I have not testes your workaround, but if itā€™s working, I donā€™t see any other problem.

Also, Iā€™ve created an internal improvement task for this and linked this topic to it.

Thank you,
Matej

1 Like
5

We added this imrpovement in Bricks 2.1.3, now available as a one-click update in your WordPress Dashboard.

Please take your time to read the changelog entry before updating, and let us know if you continue to experience issues.