I’ve uploaded a video through the Media section in the wordpress interface. The video is 720 X 540 (4:3 ratio). When it displays in a post it has black pillar bars on both sides. The video does not include the pillar bars, and on other video players, there are no pillar bars displayed. http://helpuconquer.com/video-uploaded-to-wordpress/
How can the video fill the entire width of the video player? Meaning the pillar bars are no longer displayed.
I’m assuming there must be a default size video player that is wider than the video dimensions.
I have the same issue when embedding videos from Vimeo.
Thanks,
Hi
All videos embed in the theme or uploaded via WordPress are controlled by theme’s javascript: http://screencast.com/t/iyFKcGh7b For a different aspect ratio you will need to modify the indicated function such that the style applied to be different.
This is a very complex task which involve many customizations in theme files and I can’t provide a solution now. If you can’t do it yourself my advice is to find someone to help you or hire a freelancer from sites like: http://studio.envato.com/ to do this for you.
Thanks!
I’m trying to understand your message. Are you saying that the video player in the Newsmag theme cannot adapt to different video sizes?
To say that I need to pursue “a very complex task which involve many customizations in theme files”, is not helpful. Certainly there are other alternatives.
In the WordPress support site, they state that the size (width, height, other attributes) of videos can be controlled by embed codes [embed….] https://……%5B/embed%5D. This doesn’t work in Newsmag. Why?
The Vimeo shortcode doesn’t work either – [vimeo……..].
In a world filled with online videos, why is it that the theme can’t handle different shapes and sizes without the poor looking black bars? And, shortcodes don’t work either?
I’d like a more complete answer to my questions. Your support is usually very good. But this time…..
Could I get a response from a manager who could offer a complete answer, and perhaps a solution?
Thanks for all your help.
Hi
We’re sorry for for all this inconveniences.
There are many alternatives to control the video’s layout according with it’s aspect ratio but all this involve custom code.
The videos layout it’s entirely controlled by javascript and works like this:
– first read the width of the container where video it’s displayed then set apply a 100% width to the video. For example if the container have 980px width the video will also have the same width.
– second step it’s setting up the height. This value It is obtained by multiplying the width’s value with 0.5625 for videos from vimeo.
This value can be changed anytime but this will affect all videos, no matter what aspect ratio they have. For example by changing the value like this: http://screencast.com/t/eesYaBhn9d I get this results:
– for a video with aspect ratio 4:3: http://screencast.com/t/uq7e9Nu9G
– for a video with aspect ration 16:9: http://screencast.com/t/CiuMxuf8fD You can notice in this screen that by changing the value these black bars will appear on videos with 16:9 aspect ratio. The default value, 0.5628, display correct 16:9 videos: http://screencast.com/t/OzkY7zgx but affect others.
With this informations I intended to point out that by changing the current implementation such that to display the correct videos with 4:3 aspect ratio, will be affected other videos layout, respectively the ones with 16:9 aspect ratio.
A possible solution would be to use only videos with 4:3 aspect ratio and modify the indicated value to 0.7625: http://screencast.com/t/eesYaBhn9d Other solution would be a custom code which calculate the rapport between width and height, and depending by that result apply a specific style such that the black bars to not appear on videos.
This is the complex task which I refereed as are required many investigations and tests in order to obtain best results for videos.
We certainly plan to improve this system in the future updates. I’ve added this on our todo list and when the time comes our developers will consider it. This may take some time because we have a long implementation list and we take them one by one.
I hope you will find this information useful and I apologize again if I didn’t make myself quite clear from the beginning.
Thanks!
Andrei,
Thanks for the more detailed explanation. I’ve changed the javascript as you’ve shown in the screencast from .5625 to .7625 to accommodate the 4:3 video ratio.
It hasn’t made a difference on the site. The videos still have the pillar bars on the each side.
Our videos are 720 X 540.
To display the 4:3 videos without pillar bars, is modifying this section of javascript the only thing that needs to be done?
jQuery(document).find(‘iframe[src*=”vimeo.com”]’).each(function() {
if(jQuery(this).parent().hasClass(“td_wrapper_playlist_player_vimeo”)) {
//do nothing for playlist player vimeo
} else {
var td_video = jQuery(this);
td_video.attr(‘width’, ‘100%’);
var td_video_width = td_video.width();
td_video.css(‘height’, td_video_width * 0.7625, ‘important’);
}
});
I’ve also modified the js for the wordpress embedded video. And, it still shows black pillar bars on both sides of the videos.
From your directions, these pillar bars should be removed. What am I missing?
Thanks for all your help.
Here’s the page that includes the Vimeo link after I’ve modified the javascript as instructed.
http://helpuconquer.com/test-1220/
And, here’s the page that has the wordpress embed from the Media section of the wordpress install.
http://helpuconquer.com/video-uploaded-to-wordpress/
I attempted to modify video width in the js for this. The pillar bars for both still display.
Thanks,
Hi
I have checked your site again and noticed that you’re using Speed Booster plugin: http://screencast.com/t/fXvNrMNlPqWk When this plugin is active the js is loaded from tagdiv_theme.min.js so you need to edit that file so changes to apply. Best way to edit the minified js is like this:
– first make the required changes in tagdiv_theme.js
– copy all code from tagdiv_theme.js and use a js compiler to minify it: https://closure-compiler.appspot.com/home
– copy the minified js code and paste it in: tagdiv_theme.min.js
Thanks!
Please provide a more thorough explanation. I’ve been very patient with your explanations. The instructions you’ve previously provided have been incomplete. Please refer my case to a manager who can help resolve this.
Tagdiv’s support is usually very good. But, this time…..
