How to Make a YouTube Video Embed and Align to the Center

by Allen Bethea

While YouTube provides you with the code you need to share a video for free, they don't help with the process of laying it out on your website or blog. Fortunately, YouTube's video embed code is just an ordinary HTML iframe. If you encapsulate this <iframe> code within a <div> tag, you can use the CSS or Cascading Style Sheet property text-align to display your video in the center of your blog post or Web page.

1

Launch a plain-text editor like Notepad and type the HTML div code to center the YouTube video iframe. For example, type the following code in to your editor:

<div style="text-align: center"> </div>

Include a space before "</div>" to hold the video's embed code later. This div contains the CSS code that will tell the viewer's browser to center the video.

2

Click "Share" on the YouTube video you want to share and then click "Embed."

3

Select the iframe code in the text box and press "Ctrl-C" to copy it to the clipboard.

4

Select the editor window, click the empty space before the "</div>" code, and then press "Ctrl-V" to paste the embed code. Your code should now resemble the following:

<div style="text-align: center"><iframe width="420" height="315" src="[link to your YouTube video]" frameborder="0" allowfullscreen></iframe></div>

5

Select all the code in your text editor, copy it, and paste it into the blog post or Web page you want it to display within.

Warning

  • close For security reasons, some blogging and content management systems do not support iframes. You may, however, be able to use the older HTML tag to display your video. Click "Share," Embed," and then select the check box labeled "Use old embed code."

About the Author

Allen Bethea has written articles on programming, web design,operating systems and computer hardware since 2002. He holds a Bachelor of Science from UNC-Chapel Hill and AAS degrees in office technology, mechanical engineering/drafting and internet technology. Allen has extensive experience with desktop and system software for both Windows and Linux operating systems.

Photo Credits

  • photo_camera James Woodson/Digital Vision/Getty Images