How do I center align a video link?

I've dropped a YouTube URL on its own line in plain text, and even though I choose to have that line be centered on the page, the video shows up aligned to the left margin. I have this video on my splash page, which means I've stripped out everything except this video and the sign up form. So the video looks strange being way over on the left side of the page while everything else is stretched out.

Official response from NationBuilder Support

The Aware theme has responsive design built in. This means that forms will change shape depending on the size of your browser window. If you decrease the size of the browser window (or open it on a tablet or phone), you'll see the form displayed in different ways. This formatting is designed to make it as easy as possible for visitors to your site to complete the form.

Because of the responsive design functionality, it is not possible to specify the size of a video in the Aware theme.

Share this post

Showing 4 reactions

How would you tag this suggestion?

Add comment (optional)

Sign in with

Facebook Twitter

Kevin Coleman

NationBuilder employee

Kevin Coleman commented
Hey Erika,

As far as I can tell your best option is using the margin method since applying “text-align: center;” seems to be stripped from the wysiwig. Either that, or actually embed it in the page template.

Let me know if you have any additional questions!
posted 2015-11-12 17:34:30 -0800
Erika Jones-Clary

Erika Jones-Clary commented
Hello! Is there a better reference for this question by any chance. I can add margins in a div to get it about center but is there a slide of code that does this more precisely? Thank you Thank you!
posted 2015-11-09 16:29:58 -0800

Certified Architect
Certified Expert

commented

Ian, Here is how I solved the problem. You can’t specify the size of the video but you can define the size of the <div> it nests in.

&lt;div id="“content”"&gt; 

&lt;center&gt;
&lt;div id="“intro”"&gt;
&lt;div class="“text-content”"&gt;
&lt;div id="“menu”" style="“width:20%;float:left;”"&gt; 
&lt;/div&gt; &lt;div id="“content”" style="“width:60%;align:center;”"&gt; &lt;center&gt;&lt;h3&gt;HOW TO MAKE A DIFFERENCE&lt;/h3&gt;&lt;/center&gt; &lt;/div&gt; &lt;div id="“content=”" style="“width:20%;float:right;”"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="“padbottommore”"&gt; &lt;/div&gt; 

&lt;/center&gt;
&lt;/div&gt;

Hope that helps.</div>

posted 2014-02-04 20:49:16 -0800

Ian Overton

Ian Overton responded with completed

posted 2013-12-24 10:03:07 -0800