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

by

I am using Magic Fields 2 to add custom fields/meta boxes.

One custom field is for a Vimeo or YouTube video URL to be displayed.

The following code oEmbeds the video URL:

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

To resize the video, I have used added the code inside <div class="video"> and resized it using CSS – .video iframe {width:500px;height:312px}.

The problem, this method is not responsive.

I have also tried .video iframe {width:95%;height:95%}. This outputs looks like –

enter image description here

The Fluid Video Embeds plugin seems to do the job for oEmbeds through the normal WordPress method and through shortcode, but not with using a custom field.

1 Answer
1

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