[ykelleyParticipant]

Hello,

My youtube videos are getting cropped in my posts. I do not think they are resizing properly. Here is an example, where I have embedded 2 video sizes: http://www.cookwithamber.com/sliders-3-ways-with-dj-bbq/

I expect the video to resize to fit the available space left of the sidebar. However, it is getting cropped, and the aspect ratio of the video is incorrect (they were fine before migrating over to theme X.)

This is happening with old posts (pre-X), as well as new ones created in X.

Because I will lose data for my previous posts if I use Cornerstone, I have opted out of Cornerstone for post editing.

Thank you for your help.

[NicoModerator]

Hi There,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[ykelleyParticipant]

This reply has been marked as private.

[ykelleyParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please increase height value in <iframe>tag.

<iframe src="https://www.youtube.com/embed/o0rJKMQQgYI" width="640" height="500" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Hope it helps.

[ykelleyParticipant]

I did for this one, but all of my videos are having issues. Is there way to fix all without going into each post? Thank you.

[John EzraMember]

Hi there,

Thanks for updating the thread! Regretfully, we don’t have a way to do this for all videos without going into each post. However, I do have an updated solution that will work better responsively.

For each video embed code you enter via text editor. Wrap it inside the following HTML.

<div class="videoWrapper">
[You YouTube Embed Code goes here...]
</div>

It should look something like this:

<div class="videoWrapper">
<iframe src="https://www.youtube.com/embed/o0rJKMQQgYI" width="640" height="500" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

Then you will need to add this CSS. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

You will only need to add this one, then each video you enter just add within the wrapper provided above.

Hope this helps – thanks!

[Author]

Posts