1.2 Doesn't Work

  • Resolved JayCC

    (@jaycc)


    11 years, 1 month ago

    We’re testing upgrading this plugin to the new 1.2 version, but the videos don’t display.

    This appears to be because the new JS that is included isn’t setting the padding-bottom on the .rve elements properly.

    I stuck some debug statements into the JS file to see what was happening. It appears that the JS is expecting the iframe to have a height and width attribute, and calculates the padding-bottom from those. In our case (youtube embed) the iframe does not have those attributes, so the calculated padding-bottom percentage ends up being equal to “NaN”, and thus the padding-bottom property is trying to be set to “NaN%”.

    The video is being embedded using the auto-embed feature (just a URL pasted into the post). I tried using the [embed] tag as well, specifying a height and width, but wordpress is always outputting an iframe without a height and width attribute in the .rve container.

    I don’t recall if 3.5 was adding height and width attributes to the iframes it output, but 3.6 is definitely not. Any fallback solutions for when the height and width attributes aren’t available?

    https://www.ads-software.com/plugins/responsive-video-embeds/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Kevinleary.net

    (@kevinlearynet)

    Hi Jay,

    Using the [embed] shortcode without width and height attributes appears to be working for me with WP 3.6.1. I’ve just added a test case for this to the demo page:

    https://www.kevinleary.net/responsive-video-embeds-plugin-example/
    See the “WordPress embed shortcode without width and height attributes” section

    This uses [embed]https://www.youtube.com/watch?v=EKBnhLYNs9c[/embed] inside of TinyMCE.

    That said, the NaN issue is easily solved. I’ve just pushed out a small update to the JS that should solve your issue. Here’s what changed:

    var orig = $(this);
var width = ( $('[width]', this).length > 0 ) ? orig.attr("width") : orig.width();
var height = ( $('[height]', this).length > 0 ) ? orig.attr("height") : orig.height();
var ratio = ( height / width );

    This will check for a width and height attribute, and if found it will use that. If not, jQuery calculates the dimensions of the <iframe> as a fallback.

    Can you let me know if version 1.2.1 resolves this issue for you?

    Thread Starter JayCC

    (@jaycc)

    Kevin, the updated JS does show the videos, but the proportion is off (the ratio is ending up as 50%, because jQuery sees the width as 300 and height as 150).

    In your example page, your iframe still has height and width attributes defined:

    <iframe width="621" height="349" src="https://www.youtube.com/embed/EKBnhLYNs9c?feature=oembed" frameborder="0" allowfullscreen>

    In our installation, those attributes aren’t being added by WP, even if I explicitly define them in the embed tag.

    I’ll dig around a bit more and get back to you if I find anything else. Thanks for your quick response. Overall I feel the fallback to use .width() and .height() is a good add, so at least the videos show up. ??

    Thread Starter JayCC

    (@jaycc)

    Kevin, I found a spot in our theme where the author was removing width/height attributes (thinking he was only removing them from just images) that was removing them from the iframes.

    Fixing that brings back the correct proportions and all seems well with 1.2.1. Thanks for the quick update.

    Plugin Author Kevinleary.net

    (@kevinlearynet)

    In our installation, those attributes aren’t being added by WP, even if I explicitly define them in the embed tag.

    A few questions:

    – Is this a customization set in a theme or plugin?
    – Does your theme have a $content_width defined?
    – Can you shoot me a link to the site where this is occurring?

    Plugin Author Kevinleary.net

    (@kevinlearynet)

    Great, I’m glad you resolved it Jay!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘1.2 Doesn't Work’ is closed to new replies.