How to fix some youtube videos with 4:3 ratio?

CMS & WordPress
1

I want to set video on WordPress theme in 4:3 ratio seems difficult? How can I do it?

2

You can’t. You can however compensate for it. Start with this HTML

<div class="youtube-player">
  <iframe src="embedpath"></iframe>
</div>

Then use this CSS…

.youtube-player {
  position: relative;
  padding-bottom: 60%;
  height: 0px;
  margin: 1em 0px;
}

.youtube-player iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: none repeat scroll 0% 0% 
}

What that will do is allow the player to flex to the constraints of the allowed space across all devices while maintaining the correct aspect ratio.

2 Likes
3

@Michael_Morris has the right answer here. The reason you can’t do what you’re really asking to do (which is convert the aspect ratio) is that YouTube doesn’t provide a method to crop video which is what you’d need to do. If you have a 16:9 video source and want it to be 4:3, you’ll need to “clip” a bit of the left and right sides of the video to meet the aspect ratio.

The alternative is to essentially add space (or “black bars”) to the top and bottom in order to end up with a total video aspect ratio of 4:3, which is what your best alternative solution is.

1 Like
4

Oh? I misread the question - it actually is possible to change the aspect ratio that way but it comes with a serious drawback…

This CSS is in addition too (or overrides) the above

.youtube-player {
  overflow: hidden;
}
.youtube-player iframe {
  left: -10%;
  width: 120%;
}

The problem with this fix is the player controls will also be cropped out. You can dodge this by using the Javascript API to build your own controls.

So it’s possible, but strongly not recommended. In this modern responsive age there’s no way of knowing what the aspect ratio of the device will be. iPads are 4:3, but iPhones are 16:9, and the full spectrum in between exists. People have become used to seeing black bars on occasion. Also, on iphone you can’t play the movie in the frame anyway - when the play button is pressed the video goes to full screen. From there the user will be presented with a toggle to decide whether they want the original aspect ratio or if they want the video to fill the screen - you don’t have to worry about that.

1 Like
5

Haha, I love this solution @Michael_Morris. I wouldn’t have even thought of it.

@irenerosi, Michael technically has a solution that’ll crop the video. Don’t do this though. :stuck_out_tongue:

6

haha, thank you guys. Now I know why I can’t change my video in 4:3 ratio. Because I just have bought a theme called Ruby on TF, I think it will be more beautiful if I set a video with 4:3 ratio. really thank you @Michael_Morris and @chrisrcooper

7

Btw, apart from setting video in 4:3 ratio, I think my theme operates well. Suggest you to try it :smile: Business and portfolio wordpress theme

8

Where is the free trial download link in all of that, I’m not seeing it.

9

@Mittineague Oh, it does not have trial version. I bought it from Themeforest when I tried to find a theme which is suitable to my business. It is on new top of TF. Ah, you can see its demo: wordpress theme for business and portfolio . It also has a forum: premium wordpress theme support. I think it is quite details. I am using it and feel quite satisfied.

10

then how do you expect us to

??

Is it open source?

11

Oh sorry, i just suggest you to use it. It is not free. I just share my experience to you.

16

It has more than 10 demos, you can use in many purposes. I think the introduction is quite credible. I have a online shop, so now i am using Shop demo version.

17

And the demos are free to try?

18

No no no, all are not free.

19

Which ones are?

20

go scriptnull or something like that. I am not sure :sweat:

21

I’m curious, with 4:3 considered old, wouldn’t a theme designed around 16:9 look more modern and sleek?

22

Actually, when the video’s are yours you can fix things with adding special tags to the video like yt:stretch=4:3 or yt:crop=16:9
Have a look here: http://www.reelseo.com/youtube-aspect-ratio/
That with a combination of an intrinsic aspect ratio with CSS and you should be set.

23

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.