Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save kimwhite/4e6bb588e1330870d55dc498481753e5 to your computer and use it in GitHub Desktop.
Save kimwhite/4e6bb588e1330870d55dc498481753e5 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_media_profile_field( $value, $original_value, $field_name ) {
// Define the fields that should use the 'media-container' class
$responsive_fields = array( 'video_link_1', 'video_link_2', 'video_link_3' );
// Return early if the field name is not in the responsive fields array
if ( ! in_array( $field_name, $responsive_fields, true ) ) {
return $value;
}
// Wrap the value in a div with the 'media-container' class
return '<div class="video-container">' . $value . '</div>';
}
add_filter( 'pmpromd_format_profile_field', 'format_media_profile_field', 10, 3 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment