[davidintratorParticipant]

I am using visual composer on the following test page: http://vcnwp.videochatnetwork.net/vcns-virtual-toolbox/
I am on a mac running Yosemite and WP 4.0. The page is in an Integrity child theme.

Using Visual Composer, I am embedding a self-hosted .mp4 video of 640x480px. When I select 4:3 aspect ratio in the shortcode dialog box, it makes no difference as to the aspect ratio of the video on the page. I’ve tried with 4:3 and 3:2 (for kicks) but what shows on the page is always a 16:9 video player. When I go into backend mode in VC I see that the x_vidoe player type of “4:3″ has been selected in the shortcode: [vc_row][vc_column width=”1/1″][x_video_player type=”4:3″ m4v=”http://vcnwp.videochatnetwork.net/wp-content/uploads/2014/10/VCN.BlogsFINALalt2web.mp4″ poster=”1026”][/vc_column][/vc_row]

Nonetheless, I still get a 16:9 aspect ratio.

I thought for a while there might be a conflict with other plugins. I had JW activated as a plugin so I deactivated it.
I also deactivated the Video Embed and Thumbnail Generator (did this come with X?)

Short question: How do I embed, using Visual Composer, a 4:3 video, that results in a 4:3 aspect ration on the page.

Thanks.

david

[davidintratorParticipant]

Just to add clarify something: deactivating JW player and Video Embed and Thumbnail Generator made no difference.

[ChristianModerator]

Hey David,

Thanks for bringing this to our attention. For the meantime, please add the code below in your Appearance > Customize > Custom > CSS.

.x-responsive-video.four-by-three .x-responsive-video-inner {
width: 75%;
margin: 0 auto;
}

Thanks.

[davidintratorParticipant]

Thanks. That gets us a good part of the way there. But the container is still at the 16:9 ratio. What would be the custom CSS to have the container also reflect the 4:3 ratio and thereby create a border around the 4:3 video?

Thanks.

david

[ZeshanMember]

Hi David,

In that case, please use following CSS code instead:

.x-responsive-video.four-by-three {
   box-shadow: none;
   border: none;
   padding: 0;
}

.x-responsive-video.four-by-three .x-responsive-video-inner {
   width: 75%;
   margin: 0 auto;
   border: 1px solid #ddd;
   border: 1px solid rgba(0,0,0,0.15);
   background-color: #fff;
   border-radius: 2px;
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

Hope this helps. 🙂

Thank you.

[davidintratorParticipant]

I’ve inserted the latest CSS as you advised. Unfortunately it appears not to create a 4:3 container.

.x-responsive-video.four-by-three {
box-shadow: none;
border: none;
padding: 0;
}

.x-responsive-video.four-by-three .x-responsive-video-inner {
width: 75%;
margin: 0 auto;
border: 1px solid #ddd;
border: 1px solid rgba(0,0,0,0.15);
background-color: #fff;
border-radius: 2px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

Any other ideas?

Thanks.

david

[ZeshanMember]

Hi David,

Would you mind providing us a little more information of how would you like the container to be appeared? (a link to a similar example site would be very helpful, or perhaps some screenshots)

Thanks!

[Author]

Posts