{"id":25601,"date":"2021-06-14T15:00:08","date_gmt":"2021-06-14T13:00:08","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=25601"},"modified":"2021-06-14T10:44:23","modified_gmt":"2021-06-14T08:44:23","slug":"how-to-center-align-video-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-center-align-video-in-wordpress\/","title":{"rendered":"How to Center a Video in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]There\u2019s a lot of thought that goes into <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-wordpress-blog-post\/\">creating a blog post<\/a>: the content is just the start. You also have to think about media content other than text, if you want to include it \u2013 and media-rich content is pretty much the norm nowadays. Walls of text are off-putting: best practices in website design dictate that text should be interspersed with pictures. But what about moving pictures?[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you\u2019ve ever attempted to format a text containing images or other embedded content, you know how difficult it can be to <strong>get all the different elements to behave like you want them to<\/strong>. And WordPress, versatile as it is, has some limitations. Fortunately, there is also a wide range of helpful formatting options, irrespective of the editor you are using. Before we get into the how-to, though, we would like to discuss the reasons why you should even be bothering about centering a video in WordPress.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is what we will be discussing:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-center-videos-in-wordpress\">Why Center Videos in WordPress?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-center-a-video-in-gutenberg\">How to Center a Video in Gutenberg<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-center-a-video-in-the-classic-editor\">How to Center a Video in the Classic Editor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-center-a-video-in-elementor\">How to Center a Video in Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-center-videos-in-wordpress\"><\/a>Why Center Videos in WordPress?<\/h2>\n<p>[\/vc_column_text][vc_column_text]Your content may be top-notch, but if it appears <strong>unprofessional at first glance<\/strong>, your visitors will be put off, some possibly even before they get into it. And you don\u2019t want a <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-reduce-bounce-rate-in-wordpress\/\">high bounce rate<\/a> or a poor user experience, do you?[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you <a href=\"https:\/\/qodeinteractive.com\/magazine\/embed-youtube-video-in-wordpress\/\">embed a video<\/a> into your content, and the video is less wide than the space allocated to your content, WordPress will sometimes align it to the left by default, leaving <strong>unused blank space<\/strong> to the right-hand side. This doesn\u2019t look good for reasons which aren\u2019t purely aesthetic: this makes your website look slapdash, amateurish, and poorly presented. Centering a video, on the other hand, makes your website look thought through at the very least. A large blank space is basically the only thing you should avoid.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-center-a-video-in-gutenberg\"><\/a>How to Center a Video in Gutenberg<\/h2>\n<p>[\/vc_column_text][vc_column_text]WordPress\u2019 default editor makes centering a video really easy: you can do it with a single click.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add any video, simply click the <strong>plus<\/strong> sign to add a block and select a video block.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Video-Block.jpg\" class=\"attachment-full size-full\" alt=\"Add Video Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Video-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Video-Block-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Video-Block-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Video-Block-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Gutenberg video block has several possible video sources. You can <strong>Upload<\/strong> a video to your media library, use a video already in your <strong>Media Library<\/strong>, or<strong> Insert from URL<\/strong>. We will select <strong>Insert from URL<\/strong>, paste the URL, and click <strong>Apply<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"548\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Video-Apply.jpg\" class=\"attachment-full size-full\" alt=\"Add Video Apply\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Video-Apply.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Video-Apply-300x170.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Video-Apply-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Video-Apply-620x351.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once your video is embedded, it should be centered by default. To make sure, click the <strong>Change alignment<\/strong> drop-down menu and select <strong>Align center<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"528\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Align-Center.jpg\" class=\"attachment-full size-full\" alt=\"Align Center\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Align-Center.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Align-Center-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Align-Center-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Align-Center-620x338.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And your video will now be centered. Note that other alignments are available, and provide different formatting results. A left or right alignment will also allow for text wrapping around the video, so you don\u2019t get any unsightly blank space.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"544\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Align-Right.jpg\" class=\"attachment-full size-full\" alt=\"Align Right\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Align-Right.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Align-Right-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Align-Right-768x431.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Align-Right-620x348.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can also embed video using an HTML block instead of a video one, in case you want more parameters to play with. To do that, click the <strong>plus<\/strong> sign to add a block and select the <strong>Custom HTML<\/strong> block.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"520\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Custom-HTML-Block.jpg\" class=\"attachment-full size-full\" alt=\"Custom HTML Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Custom-HTML-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Custom-HTML-Block-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Custom-HTML-Block-768x412.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Custom-HTML-Block-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The code you need to paste in order to imbed a video is this:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"&gt;&lt;div class=\"wp-block-embed__wrapper\"&gt;\r\nURL\r\n&lt;\/div&gt;&lt;\/figure&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, you need to replace the letters URL in the above code with the URL of the video you wish to embed. This code will also only work for YouTube videos.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"548\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Code.jpg\" class=\"attachment-full size-full\" alt=\"Add Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Code-300x170.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Code-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Code-620x351.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This code method should also result in a centered video by default. If it doesn\u2018t, you need to add the following parameter:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">style=\"text-align: center;\"<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]to the first <em>div<\/em> tag, like so:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"548\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Parameter.jpg\" class=\"attachment-full size-full\" alt=\"Add Parameter\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Parameter.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Parameter-300x170.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Parameter-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Parameter-620x351.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-center-a-video-in-the-classic-editor\"><\/a>How to Center a Video in the Classic Editor<\/h2>\n<p>[\/vc_column_text][vc_column_text]Of course, you may have opted to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-disable-gutenberg-in-wordpress\/\">disable Gutenberg<\/a> for whatever reason. In that case, you are likely using the Classic editor. That is fine \u2013 you can also use the <strong>Classic editor<\/strong> to center your videos.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Starting in the <strong>Visual<\/strong> mode, you can simply embed a video by pasting the link. We will squeeze our URL between the paragraphs.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"516\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Paste-Video-Link.jpg\" class=\"attachment-full size-full\" alt=\"Paste Video Link\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Paste-Video-Link.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Paste-Video-Link-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Paste-Video-Link-768x409.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Paste-Video-Link-620x330.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Your video will be automatically embedded.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"580\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Embedded-Video.jpg\" class=\"attachment-full size-full\" alt=\"Embedded Video\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Embedded-Video.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Embedded-Video-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Embedded-Video-768x460.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Embedded-Video-620x371.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In order to center a video, you will need to be editing a post or page in <strong>Text<\/strong> mode.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once in <strong>Text<\/strong> mode, locate your embedded video. You should be able to recognize its URL.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In order to center your video, add this code above the video URL:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;div style=\"text-align: center;\"&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And this below:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;\/div&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"448\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Classic-Editor-Text-Mode-Add-Code.jpg\" class=\"attachment-full size-full\" alt=\"Classic Editor Text Mode Add Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Classic-Editor-Text-Mode-Add-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Classic-Editor-Text-Mode-Add-Code-300x139.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Classic-Editor-Text-Mode-Add-Code-768x355.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Classic-Editor-Text-Mode-Add-Code-620x287.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And your video will be centered in the published version of the post. You can see your code at work if you take a look at the <strong>Visual<\/strong> tab of your editor.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"540\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Centered-Video.jpg\" class=\"attachment-full size-full\" alt=\"Centered Video\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Centered-Video.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Centered-Video-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Centered-Video-768x428.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Centered-Video-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And even if you use code to embed video for whatever reason, pasting the div tags above and below your embed code should still work.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-center-a-video-in-elementor\"><\/a>How to Center a Video in Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]Centering a video with Elementor is, as in Gutenberg, a default function for the most part. To add a video, simply drag a <strong>Video<\/strong> element from the left-hand side menu to where you want it in the post.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"524\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Video-Element.jpg\" class=\"attachment-full size-full\" alt=\"Add Video Element\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Video-Element.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Video-Element-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Video-Element-768x415.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Video-Element-620x335.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you have the element in place, paste the video URL into the <strong>Link<\/strong> field.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"599\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Video-Link.jpg\" class=\"attachment-full size-full\" alt=\"Video Link\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Video-Link.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Video-Link-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Video-Link-768x475.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Video-Link-620x383.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Your video should be centered by default. If it isn\u2018t, you will find the alignment controls in the <strong>Edit Column<\/strong> menu of your new video section.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"564\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Column.jpg\" class=\"attachment-full size-full\" alt=\"Edit Column\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Column.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Column-300x175.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Column-768x447.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Edit-Column-620x361.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The vertical and horizontal alignment can be changed in the <strong>Layout<\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"561\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Centered-Laoyut.jpg\" class=\"attachment-full size-full\" alt=\"Centered Laoyut\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Centered-Laoyut.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Centered-Laoyut-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Centered-Laoyut-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Centered-Laoyut-620x359.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]And, easy as that, we have shown that there are several ways to center a video in WordPress, and any differences are mainly due to the editor you are using. Of course, this is only touching lightly upon formatting in WordPress. But of course, there are plenty of other options (<a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-wordpress-columns\/\">using columns<\/a> for formatting, for instance) which can affect the way embedded videos are presented to your users. We strongly encourage you to explore.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Are your embedded videos off-center? Check out our handy tutorial on how to center a video in WordPress!<\/p>\n","protected":false},"author":16990,"featured_media":25655,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[27,4,13],"class_list":["post-25601","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-content","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/25601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=25601"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/25601\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/25655"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=25601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=25601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=25601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}