Embedded video size


#1

How can I reduce the size of embedded videos from YouTube, et al? For example: http://www.leadingwithideas.com/seize-the-day/

Thanks!

Lance


#2

Hello there,

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.embed-youtube{
  max-width: 500px !important;
}

Adjust the value accordingly.

Regards,
Kharis


#3

Thanks Kharis! With the size corrected, how can I make sure the video is centered?


#4

Hello there,

I would like to apologize in advance for the delayed respond.

To make it center, apply the following CSS code:

.embed-youtube{
  margin-left: auto;
  margin-right: auto;
}

Regards,
Kharis


#5

No worries on the delay, Kharis! Thanks for the fix. Is there a way to adjust this to apply to all embedded video, not just YouTube?

.embed-youtube{
margin-left: auto;
margin-right: auto;
}

For example, I have a Vimeo video on this page that remains too large: http://www.leadingwithideas.com/speaking/


#6

When I use the

.embed-youtube{
  max-width: 500px !important;
}

The video is still max hight https://mschallenge.dk (second video) so the css just cut off px from both sides.


#7

Hello there,

I noticed that you are currently using the older version of Sydney Pro. Please try to update to latest version. Updating could fix the issue.

Regards,
Kharis


#8

Kharis: I assume you’re talking to Klaus Bloch with your last response. How about my last question?

Is there a way to adjust this to apply to all embedded video, not just YouTube?

.embed-youtube{
margin-left: auto;
margin-right: auto;
}

For example, I have a Vimeo video on this page that remains too large: http://www.leadingwithideas.com/speaking/

Thanks Kharis!


#9

Hello there,

I would like to apologize in advance for the delayed respond.

Try to apply the following CSS code:

.embed-vimeo{
  max-width: 500px !important;
  margin-left: auto;
  margin-right: auto;
}

Regards,
Kharis


#10

Hello; I use many videos in blog posts, but with several different sizes. Your CSS reduces the size of every video uniformly, which messes up those posts that have two videos side by side @410px wide each. Also, I sometimes prefer a larger or smaller video, depending what the post is about. Is there no way to allow each post to determine the video size, as I did in my old theme?
BTW, I love your theme, otherwise!
This is the staging site I’m using:
http://thedogladysden.wpstagecoach.com
Example of videos side by side from my old theme:


How they look on the Sydney theme:
http://thedogladysden.wpstagecoach.com/internat-adventures-musical-memories/

Thanks in advance!


#11

Dear Debbie,

How did you insert those videos? Did you use a plugin?

Regards,
Kharis


#12

Hi, Kharis; Now I use the Tiny MCE Advanced plug-in, but before that, I just used the Youtube embed code and manually adjusted the sizes.


#13

Hello there,

The .fitVids() script which is included in the theme might be causeing this. Let me talk to our developer. I will update you ASAP. Please be patience.


#14

Meanwhile, please check this plugin which could be an alternative solution for such that objective.

Regards,
Kharis


#15

Hi Debbie,

In Sydney the videos are responsive and in order to achieve that the width/height parameters from your iframes are removed. In your older theme the videos were not responsive and that’s why you can set any size you want.

However, the solution is simple. You just need to wrap your videos in paragraphs and set the width you want in them. This way you can have your size and also have responsive videos.

For example if you want to have them on two columns, each video needs to be wrapped like this:


<p style="width: 50%; float: left;"><iframe src="https://www.youtube.com/embed/8f1z-nHvt3c" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

Let us know if you need further help with this.


#16

Thank you, Kharis. I will check out this plug-in.

Vlad: That would mean I have to go through all my old posts and make these changes? Yikes! There are hundreds of videos on my blog. Using your code above, can I use pixels instead of percentage?

This is a big problem for me, but I’ve already put so much work into designing the front page and I don’t want to abandon it.

Thanks for your responses.


#17

Point is to keep the videos responsive, using pixels instead of percentage would go against that. Or it will complicate the code anyway as it would require some breakpoints.

Going through hundreds of videos is obviously not an option so if you want I can write a small plugin for you that stops fitvids from running and thus preserves the behavior your videos had in your previous theme. Email me at vlad[at]athemes.com if you want to give this a shot.


#18

I had no idea this would be so difficult and appreciate all your help. Yes, if this function can be over-ridden for the old posts, that would be ideal. I’ll send you an email. Thank you!