S2Stream Shortcode – Width Percentage

I’m trying to pass a percentage for the width and height using the S2Stream shortcode. However, it doesn’t appear to honor values with a percentage sign.

If I use this…

player_width="100%"

or

player_height="100%"

It strips the percentage signs out. So I end up with browser source code like

width: 100,
height: 100,

Am I doing something wrong?

Any insight on what I need to do different is greatly appreciated.

I was able to find a work around until S2Stream can support width and height percentages. The reason I want to use percentages is that I want the video to be responsive. In order to implement a responsive video I am implementing the process similar to the method presented here.

One of the requirements of this method is to have the video width and height attributes set to 100%.

As of version v130221, S2Members S2Stream shortcode doesn’t (evidently) support percentages in the width and height values. If you use a percent sign in width and height it’s stripped out. To bypass this limitation, I duplicated the shortcode file jwplayer-v6-rtmp.php found at /wp-content/plugins/s2member/includes/templates/players and renamed the new file jwplayer-v6-rtmp-responsive.php.

Find the line

height: %%player_height%%,

and replace with

height: '%%player_height%%%',

Then find

width: %%player_width%%,

and replace with

width: '%%player_width%%%',

Now when using the shortcode, I can use 100 for the width and height and it will honor the extra percentage sign we added in the new shortcode.

[s2Stream player="jwplayer-v6-rtmp-responsive" player_path="/jwplayer/jwplayer.js" file_download="myfile.mp4" player_width="100" player_height="100" player_key="myplayerkeycodehere" download_key="true" file_type="mp4" player_id="s2_stream_video" player_stretching="fill" /]

Finally, I’m using the FitVids for WordPress plugin. After activating the plugin, in it’s settings in the field for jquery CSS selector I’m using #wrapper. For the FitVids custom selector I’m using s2_stream_video_wrapper.

In my CSS, I add…

#s2_stream_video_wrapper {
    width: 100%;
    position: relative;
    padding: 0;
    padding-bottom: 75%;
}
#s2_stream_video_wrapper object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Please note, as pointed out in the above linked article, you will likely need to change the padding-bottom value in your CSS. The way to get that number is to divide the height/width of the source video and then multiply by 100. (height / width * 100 = percentage) The final number is the padding-bottom percentage you should use.

This method provides a responsive video using S2Member’s S2Stream shortcode with JWPlayer.

One final note, this will only work on pages with a single video and not on pages with multiple videos.

Thank you for reporting this important issue.

We are very sorry for the delay.

I’m putting in a request to have this looked at in the next maintenance version of s2Member. I can confirm that s2Member ignores percent signs (%).

Thanks for the heads up on this thread :-)

The documentation for JW Player does not allow a percentage-based width or height. However, it seems from the example that JW Player may let them slide; even though it’s undocumented. I’m adding support for this into the next maintenance release.

I’m also adding a new class attribute to all JW Player template files: class="s2member-jwplayer-v6"

These changes will be documented in the changelog for the next release. Please allow one or two days for this to come out. Thanks!

Thanks for reporting this!

Once the next release is made available, a percentage-based width/height would need to be specified like this:

player_width="'100%'" (using single quotes to encapsulate the value)

Scratch this. It won’t be necessary. Using player_width="100%" will suffice in the development copy. This will be released officially in the next day or two.

Thanks Jason. It will be nice to have this functionality in S2Stream.