How to oEmbed from custom field, responsive to container size and responsive

I completed the task with fitvids.js by using the plugin FitVids for WordPress.

Chris Coyier describes the integration with WordPress in his screencast Integrating FitVids.js into WordPress (on YouTube).

My custom field name is video_url. I used the following code in my template:

<?php if (!((get_post_meta($post->ID, 'video_url', TRUE))=='')) {
    echo wp_oembed_get( get_post_meta($post->ID, "video_url", true) );
}?>

In the settings of FitVids for WordPress, simply enter the containing div class or ID which represents the maximum width of the video.

enter image description here

For those who need it, Integrating FitVids.js into WordPress screencast shows how to check the theme for jQuery and for the proper CSS selector.

Leave a Comment