How do I limit the size of a YouTube video?

[annieb]

I’ve been trying to add and resize a Youtube video but I’m going around in circles. My video is resized to the full width of my page but, because it’s only a standard definition video, it doesn’t look very good on the page.

I’ve been reading about shortcodes but I’m struggling to implement them correctly. In fact I have no idea where to start. Perhaps I need the Pro version for this, I’m not sure.

I’ve embedded the YouTube embed code in the text editor but the sizes are not respected when the video is displayed.

The embed code looks like this…

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/…………&#8230;.?rel=0″ frameborder=”0″ allowfullscreen></iframe> (I’ve removed the actual video’s id)

I substituted width=”530″ for max-width=”560″ but this doesn’t work.

Please could somebody enlighten me on the exact syntax I need to use to limit the width of a video. I still wish it to be responsive but to have a maximum size.

[annieb]

Further to my previous post, I’ve managed to find the instructions on the Weaver Xtreme Support plugin documentation page.

“However, the instructions say “percent=100 – By default, the video will be sized to fill the full content space. You can use the percent value to make
the video use a percentage of the content space (but mobile will always use full width).”

I’ve managed to resize the video to 70% but it does exactly the same on my mobile phone and tablet (ie. it’s not full width).

Here’s a link to a test page: http://www.ambwebdesign.co.uk/wordpress/video-test/

This is my shortcode… [youtube id=UE0jQaENsW8 rel=0 percent=70]

Is there a way to set a maximum width in pixels rather than a percentage? If not, how do I overcome the mobile problem?

[scrambler]

read item #4 of the thread below

http://forum.weavertheme.com/discussion/12527/weaver-xtreme-tips-and-tutorial-part-7

On how to use the max-width instead of %

[annieb]

I took a look at the thread and placed the following code into the Custom CSS Rules box but it doesn’t seem to work.

.page-id-4972 .wvrx-video {max-width:450px;}

My shortcode is…

[youtube https://www.youtube.com/watch?v=UE0jQaENsW8 https=0 rel=0]

(Edit: apolgies the code above won’t format in this forum properly.)

I’m using a child theme so, after this didn’t work, I thought I’d try it a different way. Therefore I placed the code into the style.css file but this didn’t work either. What am I doing wrong?

[scrambler]

You still have the max width set at 100%, so you need to add !important to the rule to override.

.page-id-4972 .wvrx-video {max-width:450px !important;}

[annieb]

I think I’ve managed to achieve what I was trying to do through using inline css as follows…

<div class=”aligncenter” style=”max-width: 550px;”>my shortcode</div>

Is there any reason why I shouldn’t use this?

I don’t know why the other method wouldn’t work.

[annieb]

Just seen your post scrambler. I will try adding !important in the morning as it’s getting late here in the UK now.

Cheers.

[annieb]

I tried adding !important but this still didn’t work so it looks as though I’ll have to continue using my inline css.

[scrambler]

We can tell you what is wrong with your implementation if you put the CSS an post back.

But you can also use your solution who does the same thing with just more code

[annieb]

I’ve put the css back as suggested and the post is at http://www.ambwebdesign.co.uk/wordpress/video-test/

I see there’s a max-width in the source code below but I don’t know which file I need to go to in order to remove it or whether I can override it in my child theme’s style.css

<div class=”wvrx-video wvrx-youtube” style=”margin-left:auto;margin-right:auto;max-width:100%;“>etc.

[scrambler]

you have to pay attention to syntax 🙂

you used the bad syntax below

.page-id-4972 .wvrx-video {max-width:450px; !important}

instead of the proper one

.page-id-4972 .wvrx-video {max-width:450px !important;}

The !important needs to be with the property (separated by a space)  and before the semi colon

[annieb]

Oops. Thanks very much. I’ve got it now.

[Author]

Posts