How to Center a Video

5 replies · opened Apr 10, 2020

77Lexen7Apr 10, 2020

Hi there,

When I reduce the width of the display size from width: 100% to width: 50% the video aligns to the left.
Any chance how you can tell me how to center it?

Here is the code
<video poster="videos/video-poster.jpg" preload="auto" controls autoplay loop muted style="display: block; width: 50%;" >
<source src='videos/We-Focus-on-Interest.mp4' type='video/mp4' />
</video>

If you point me to a way to do it via custom CSS, would you please include instructions on where exactly to place the custom code?

Thank you!!

SSemicolon WebSTAFFApr 11, 2020

Hello,

You can consider adding the .mx-auto Class to the <video> tag. This would center the Video within its container.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

77Lexen7Apr 13, 2020

Thank you for that.
Any chance you can tell me how to incorporate that into this?

<iframe width="560" height="315" src="https://www.youtube.com/embed/iCBmb11YZgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

SSemicolon WebSTAFFApr 14, 2020

Hello,

You can try using this code:

However, if you choose to use this inside another DIV, add the Class to that DIV.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

77Lexen7May 6, 2020

Hi there,

Can you tell me what you mean by "include that Class to the DIV

Here is what I have

&lt;div align="center"&gt;		

<iframe width="640" height="360" src="https://www.youtube.com/embed/NYyiSaHke3s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

&lt;/div&gt;	

Thank you!!

SSemicolon WebSTAFFMay 6, 2020

Hello,

Ideally, your codes should look like this:


&#x9;

The codes you are using are not valid anymore according to the HTML5 Standards. You can check more examples of Utility Classes here: https://getbootstrap.com/docs/4.4/utilities/spacing/ .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard