{"id":119296,"date":"2013-08-02T11:30:15","date_gmt":"2013-08-02T15:30:15","guid":{"rendered":"http:\/\/wpmu.org\/?p=119296"},"modified":"2022-03-14T23:58:00","modified_gmt":"2022-03-14T23:58:00","slug":"how-to-center-a-video-in-wordpress","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/how-to-center-a-video-in-wordpress\/","title":{"rendered":"How to Center a Video in WordPress"},"content":{"rendered":"<p>Frustrated that you can\u2019t get your videos centered in your WordPress posts? Maybe you have a post that looks like this:<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-119297\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/08\/not-centered.jpg\" alt=\"not-centered\" width=\"699\" height=\"540\" \/><\/div>\n<\/div>\n<p>Continue reading, or jump ahead using these links:<\/p>\n<ul>\n<li><a href=\"#center-a-video\">Center a Video in WordPress<\/a><\/li>\n<li><a href=\"#make-full-width\">Make the Video Full Width<\/a><\/li>\n<\/ul>\n<h2 id=\"center-a-video\">Center a Video in WordPress<\/h2>\n<p>With WordPress, you can go to a place like YouTube, copy the URL, put it into your post, and your video will show up automatically.<\/p>\n<p>With this little trick, however, you will need to get the full embed code (not just the URL).<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-119298\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/08\/embed-code.jpg\" alt=\"embed-code\" width=\"699\" height=\"299\" \/><\/div>\n<\/div>\n<p>Once you have the embed code, go the TEXT tab in your editor, and put the your embed code in the middle of the following snippet of code where it says \u201cembed-code.\u201d (*Code updated.)<\/p>\n<pre>&lt;div style=\"text-align:center\"&gt;<strong>embed-code<\/strong>&lt;\/div&gt;<\/pre>\n<p>It should look something like this:<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\">\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-119353\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/08\/text-tab2.jpg\" alt=\"text-tab2\" width=\"699\" height=\"378\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>And that\u2019s it. You should now get a centered video like the one below.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-119300\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/08\/centered-video.jpg\" alt=\"centered-video\" width=\"697\" height=\"568\" \/><\/div>\n<\/div>\n<h2 id=\"make-full-width\"><b>Make the Video Full Width<\/b><\/h2>\n<p>While centered is better then left-aligned, what many people would actually prefer is a video that covers the full width of their post.<\/p>\n<p>You can do that by using the embed code too. On YouTube (or wherever), just change the embed to be a larger size. YouTube makes this very convenient. You only need to put in the width you want, and it will calculate the height for you in order to keep the video the same ratio.<\/p>\n<p>Let\u2019s say, for example, that I know the width of your post area is 700px. Just put that into the width box on YouTube. You will also see the sizes change in the embed code itself. If you don\u2019t know the width of your posts, just play with it till you get it right.<\/p>\n<p>(You\u2019ll notice that YouTube has some common sizes already listed in a pull-down menu. You\u2019ll need to choose \u201cCustom size\u201d if you want anything other than those sizes.)<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-119301\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/08\/custom.jpg\" alt=\"custom\" width=\"698\" height=\"328\" \/><\/div>\n<\/div>\n<p>And here\u2019s a full width look:<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-119302\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/08\/full.jpg\" alt=\"full\" width=\"698\" height=\"637\" \/><\/div>\n<\/div>\n<p>*Note: Of course if your video is the full width of your post, there\u2019s no need to center it. You can just paste the embed code into your Text tab area.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This quick tip will get your videos lined up and centered away.<\/p>\n","protected":false},"author":84404,"featured_media":206465,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[],"tutorials_categories":[],"class_list":["post-119296","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/119296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=119296"}],"version-history":[{"count":4,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/119296\/revisions"}],"predecessor-version":[{"id":207369,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/119296\/revisions\/207369"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/206465"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=119296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=119296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=119296"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=119296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}