Skip to content

Instantly share code, notes, and snippets.

@kimcoleman
Created October 28, 2024 20:45
Show Gist options
  • Save kimcoleman/3f21e330adabd5b9ecc0de8cf8462b35 to your computer and use it in GitHub Desktop.
Save kimcoleman/3f21e330adabd5b9ecc0de8cf8462b35 to your computer and use it in GitHub Desktop.
Add a container to wrap a video oembed field and make it responsive.
<?php
/**
* Wrap the oembed video in a div so we can use custom CSS to make the video responsive inside the container.
* You must also add the following custom CSS to your site:
* .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
* .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
*/
function format_video_profile_field( $value, $original_value, $field_name ) {
// Return early if the field name is not 'video'
if ( 'video' !== $field_name ) {
return $value;
}
// Wrap the value in a div with the 'video-container' class
return '<div class="video-container">' . $value . '</div>';
}
add_filter( 'pmpromd_format_profile_field', 'format_video_profile_field', 10, 3 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment