I cant center my you tube video

This is your custom rule rule which is causing that:

iframe {
    display: block;
    float: left;
    margin-right: 20px /* Adjust */
}

So does it mean I cant have both? I need that rule for putting 2 videos side by side on a different page. This page I need the video to be in the centre.

You can,
this is about CSS not about this theme (there’s no css rule in this theme which is preventing that :D), you need more specific rules to match just what you need, when you don’t want a rule to be applied sitewide.
For example you can limit that rule for the page where you want to display two videos side by side.
Link to this “page”?

OK good to know. How would I apply that rule? How would I write it? Sorry to ask. I am new to this.

I was asking for the link to that page ’cause it might depend on the type of the “page”. Is that a post page? Or a page?
For example you can do.

.page-id-ID iframe{
    display: block;
    float: left;
    margin-right: 20px /* Adjust */
}

and replace ID with the id of that page
.
page-id-ID refers to one of the body CSS classes.
https://doc.presscustomizr.com/customizr/browsers-dev-tools/

The pages I need side by side are https://www.foodandbeveragetrainer.com/hygiene-and-grooming/
and
https://www.foodandbeveragetrainer.com/powerpoint-trainings/
and
https://www.foodandbeveragetrainer.com/food-and-beverage/
The page I need in the center is
https://www.foodandbeveragetrainer.com/guest-service/

Thanks heaps for your help and support.

That’s what I see in the latest link:
<div style="text-align: center;"><iframe width="640" height="480" src="https://www.youtube.com/embed/HbK-LHXsxg8" frameborder="0" allowfullscreen=""></iframe></div>
I assume you created that div, right? But not the iframe, the iframe is generated with a shortcode, right?
In this case you can assign a css class to that div, replacing style:text-align:center; with class=iframe-center, and add this to your custom-css like:

.iframe-center iframe {
    float: none;
    margin: auto;
}

Yes that worked. You are a genius. Yeah. Thanks so much.

I wish I was ??
You’re welcome.
Would you mind marking this topic as resolved?
Thanks

Will do and thanks again.

I tried to close this post by ticking the box but it didnt work. I need your help once again.
Now I need my home page to have 3 videos side by side which I have done but it wont centre.
I have used the following HTML code.
<div style=”text-align: left;”><iframe src=”https://www.youtube.com/embed/zFDtivSwYqM&#8221; width=”319″ height=”239″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
<div style=”text-align: center;”><iframe src=”https://www.youtube.com/embed/-po7JuEOf5k&#8221; width=”319″ height=”239″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>
<div style=”text-align: right;”><iframe src=”https://www.youtube.com/embed/o7Y9UIYrH-g&#8221; width=”319″ height=”239″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>
</div>

home page is https://www.foodandbeveragetrainer.com/
Thanks heaps

Looks like a missing </div> after first iframe?

I’d surround with a div to set class or id so it can be styled in CSS.

<div class="ytvids">
---your code ---
</div>

then look at styling with
.ytvids {}

Thanks Rdell I tried that but didn’t work. Regards to the styling what do I need to write in between {}?

Well it’s worked, just not as you would like ??

1) What’s supposed to happen with the F&B Trainer logo? That’s screwing up the 3 x ytvids causing an overflow to next line

2) Try calling them ytvids1, ytvids2, ytvids3 like this:

<div class="ytvids ytvids1">
---your code ---
</div>
<div class="ytvids ytvids2">
---your code ---
</div>
<div class="ytvids ytvids3">
---your code ---
</div>

Then we can target each box if we need to. Try this and come back for more:

.ytvids1 {
clear: left;
}

Can see you did that. Now let’s put them in a container so we can adjust the container:

<div class="ytvid-container>
 <div class="ytvids ytvids1">
 ---your code ---
 </div>
 <div class="ytvids ytvids2">
 ---your code ---
 </div>
 <div class="ytvids ytvids3">
 ---your code ---
 </div>
</div>