3

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.

Improve this question
6
  • 1
    So you want the div to keep the aspect ratio of the embed via js/css? I'd think that's not a WordPress issue and has little to do with the WP OEmbed process other than coincidence/circumstance
    – Tom J Nowell ♦
    Commented Jun 6, 2013 at 16:39
  • If that's the case, can you migrate this to a different SE site? Thanks.
    – Travis Pflanz
    Commented Jun 6, 2013 at 18:51
  • Actually, this is completely relevant to WordPress. WordPress has built in oEmbed and I have included a method that allows for responsive oEmbeds using a WordPress plugin. The specific issue is how to complete task when the oEmbed is a custom field... But screw it... Close the question because mods do not know the answer... That seems to be the trend here the past 9 months or so. I have talked to a LOT of WP users... This is viewed as an unhelpful and elitist WP community lately. Sad, it used to be helpful.
    – Travis Pflanz
    Commented Jun 6, 2013 at 20:02
  • 1
    Is it absolutely imperative that this be oEmbed? Seems this can be accomplished with FluidVids (resize) 142.4.8.79/~sfmc/video/aaa-screening or without (resize) lakecookortho.com/video/peter
    – GhostToast
    Commented Jun 6, 2013 at 21:14
  • I'm not a mod, I'm another user, the only difference between me and you is that I have more reputation here at the moment, who knows that may change. From my experience it looks like you have a CSS problem, namely "given an element, how do I maintain an aspect ratio of A:B while resizing?" which is a css/js question applied to the output.
    – Tom J Nowell ♦
    Commented Jun 6, 2013 at 23:06

1 Answer 1

Reset to default
2

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.