{"id":97835,"date":"2022-06-16T00:53:43","date_gmt":"2022-06-16T04:53:43","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=97835"},"modified":"2022-06-16T01:02:57","modified_gmt":"2022-06-16T05:02:57","slug":"add-video-blocks-patterns","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/","title":{"rendered":"How to Add Video Using Blocks or Patterns with WordPress FSE"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-fse-1024x538.jpg\" alt=\"\" class=\"wp-image-97837\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-fse-1024x538.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-fse-300x158.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-fse-768x403.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-fse.jpg 1200w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>A common task with adding content is adding a video to a post or page.\u00a0 This tutorial will guide you through the process of adding videos to your WordPress site.\u00a0 We will discuss common concerns to think about before using video content,\u00a0 using the blocks and patterns available in the full site editing system (FSE), and describing the different blocks and patterns you can use to add videos.<\/p>\n\n\n\n<p class=\"alert alert-info\">This tutorial uses WordPress version 6.0 and the Twenty Twenty-two theme.\u00a0<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#consider\">Things to Consider Before Adding Videos<\/a><\/li><li><a href=\"#using-blocks\">Using Blocks for Videos<\/a><\/li><li><a href=\"#using-patterns\">Using Patterns for Videos<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"consider\">Things to Consider Before Adding Videos<\/h2>\n\n\n\n<p>Before you add a video to your WordPress site, remember that a video can help make your site more interesting, but it can also have a negative impact on your site. Make sure to consider the following factors before adding videos to your site.<br><\/p>\n\n\n\n<p><strong>Audience<\/strong><br><br>The videos that you use for your site should be appropriate for your audience.\u00a0 Your video should match the content your audience is searching for. It should also reflect the quality, length, and technicalities that your viewers are expecting.\u00a0 For example, if your site is a blog for video creators, you will want to have appropriate content as well as technically correct videos to show your expertise.<\/p>\n\n\n\n<p><br><strong>Multiple Videos<\/strong><br><br>If you\u2019re planning on using many videos on your site, then make sure that you are using a Content Delivery Network (CDN) for your video content.\u00a0 If you\u2019re using links from YouTube or another video service (e.g. Vimeo, VideoPress), then you will not need to use a CDN as those services provide a delivery network when you play videos from their site.\u00a0\u00a0<\/p>\n\n\n\n<p>The consequence of not using a CDN and playing videos from a web hosting service may result in high resource usage, slow performance, and possible suspension of your web hosting service.<br><\/p>\n\n\n\n<p><strong>Background Videos<\/strong><br><br>Some people like to use background videos for title covers for artistic reasons.\u00a0 If you plan on doing this, then make sure to create a video loop that is short and optimized.\u00a0 You don\u2019t need a 5-minute video for a background cover.\u00a0\u00a0<\/p>\n\n\n\n<p>Using a long video will use hosting resources and possibly impact the performance of your site.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Copyright Issues<\/strong><br><br>Make sure you have the rights to all videos that you put on your WordPress site.\u00a0\u00a0<\/p>\n\n\n\n<p>Misuse of copyrighted content can result in the suspension of your service, or at worse, a legal challenge resulting in possible fines or payment for usage. We recommend that you consult with a lawyer who specializes in copyright if you have questions.<br><\/p>\n\n\n\n<p><strong>Protecting Your Content<\/strong><br><br>A content creator will often want to protect the videos that they are sharing on the site.\u00a0 There are some plugins that you can add to your WordPress site that will help to protect videos from being downloaded.\u00a0 But this is no guarantee that the video can\u2019t be recorded.\u00a0\u00a0<\/p>\n\n\n\n<p>If you\u2019re putting your content online, then you should be prepared for your content to be copied.\u00a0 You should make sure that it is watermarked and properly copyrighted\/registered. And you should be aware of your content\u2019s presence online.\u00a0 Make sure to occasionally search and check to make sure that your content is not being distributed from an unauthorized source.<br><\/p>\n\n\n\n<p><strong>Controls for Playback<\/strong><br><br>When you use a service like YouTube or Vimeo, the playback frame will be marked as a YouTube or Vimeo product.\u00a0 If you want to control this appearance yourself, then you will need to use a software solution and a CDN where you can customize how the video playback controls will appear.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"using-blocks\">Using Blocks for Videos<\/h2>\n\n\n\n<p>The WordPress FSE makes it very easy to add different types of content and video is no exception. Follow the steps below to see how to use a block to add a video to your post or a page.\u00a0 We will follow this section with descriptions of the different types of video blocks that are currently available.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Steps for Adding Videos Using a Block or Pattern<\/h3>\n\n\n\n<ol class=\"article_list wp-block-list\"><li><a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/logging-into-wordpress-dashboard\/\">Log in to the WordPress Administrator Dashboard.<\/a><\/li><li>Open an existing page or post, or create a new one.<\/li><li>Click on the + sign in the top left corner of the editor to open the block inserter.<br><br><br><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"364\" class=\"wp-image-97844\" style=\"width: 700px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/toggle-insert-block.jpg\" alt=\"Toggle block inserter\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/toggle-insert-block.jpg 1080w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/toggle-insert-block-300x156.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/toggle-insert-block-1024x533.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/toggle-insert-block-768x400.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>Type \u201cvideo\u201d in the search field.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"368\" class=\"wp-image-97845\" style=\"width: 700px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-search.jpg\" alt=\"Type Video in search field\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-search.jpg 944w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-search-300x158.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-search-768x404.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>You will then see a number of blocks specifically for video.\u00a0 Note that some video blocks will position the video as a background or in a specific area.\u00a0 This applies to patterns that you might select.\u00a0 For this tutorial, simply select the block labeled \u201cvideo.\u201d<\/li><li>You will see the video block when you add it and there will be 3 options:\u00a0 <strong>Upload<\/strong>, <strong>Media Library<\/strong>, or <strong>Insert from URL<\/strong>.\u00a0 Use one of these options to add the video to the block.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"388\" class=\"wp-image-97846\" style=\"width: 700px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-post-1.jpg\" alt=\"Video block - select video file\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-post-1.jpg 895w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-post-1-300x166.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-post-1-768x426.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>Click on <strong>Save Draft<\/strong>, <strong>Publish<\/strong>, or <strong>Update<\/strong> to save your changes.<\/li><\/ol>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Types of Blocks for Video<\/h3>\n\n\n\n<p>The best way to see all of the blocks for videos is to open the blocks menu labeled \u201ctoggle block inserter\u201d in the top left corner of the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/toggle-insert-block-1024x533.jpg\" alt=\"Toggle block inserter\" class=\"wp-image-97844\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/toggle-insert-block-1024x533.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/toggle-insert-block-300x156.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/toggle-insert-block-768x400.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/toggle-insert-block.jpg 1080w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>Opening this column will display all of the blocks that you can use to insert a video into your post or page.\u00a0 You will also see patterns, but we\u2019ll discuss them later.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-block-options-1024x535.jpg\" alt=\"Video block options\" class=\"wp-image-97847\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-block-options-1024x535.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-block-options-300x157.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-block-options-768x401.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-block-options.jpg 1087w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>The video blocks that are available can be sorted into a generic video block for local video files, 2 blocks based on positioning in a post or page, and 8 blocks based on a video service.<\/p>\n\n\n\n<p><strong>Video Block (generic)<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"284\" height=\"279\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/generic-video.jpg\" alt=\"Video Block (generic) - use to embed video\" class=\"wp-image-97848\"><\/figure>\n\n\n\n<p>This block is used for adding local video files.\u00a0 You can upload or use the Media Library.\u00a0 It also accepts links to videos.\u00a0\u00a0<\/p>\n\n\n\n<p><strong>Cover<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"267\" height=\"337\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/cover-image-video.jpg\" alt=\"Cover - background video block\" class=\"wp-image-97849\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/cover-image-video.jpg 267w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/cover-image-video-238x300.jpg 238w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>This block is used for adding covers with a video background and overlay text.<\/p>\n\n\n\n<p><strong>Media &amp; Text<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"266\" height=\"222\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/medi-text.jpg\" alt=\"Media &amp; text - block with text and video that can be positioned\" class=\"wp-image-97851\"><\/figure>\n\n\n\n<p>This block has the option to place the video on the left or right.\u00a0 You can also add text to the left or right of the video.<\/p>\n\n\n\n<p><strong>Video Services<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"519\" height=\"290\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/youtube-block-example.jpg\" alt=\"Example of video service block - YouTube video embedded\" class=\"wp-image-97850\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/youtube-block-example.jpg 519w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/youtube-block-example-300x168.jpg 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>These blocks include YouTube, Vimeo, Animoto, Dailymotion, TikTok, TED, and WordPress.tv.\u00a0 The frames controlling the playback of the video will typically identify the service that you\u2019re using.\u00a0 When you first add the block, you will need to provide the share URL for the video.<\/p>\n\n\n\n<p><strong>Video Plugins<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"281\" height=\"495\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-plugins.jpg\" alt=\"Block plugins available for installation - plugins can be used for embedding videos and additional functionality\" class=\"wp-image-97852\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-plugins.jpg 281w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-plugins-170x300.jpg 170w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>After your search of blocks and patterns, you will see a list of suggested plugins under the title, \u201cAvailable to install.\u201d\u00a0 These plugins will give you added functionality and options that you can use for adding videos to your WordPress site. Note that the screenshot above only shows a few of the available plugins.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"using-patterns\">Using Patterns for Adding Video<\/h2>\n\n\n\n<p>The other choices that will appear when searching for video blocks are patterns.\u00a0 Patterns are simply groups of blocks defined for a particular purpose.\u00a0 In this case, there are patterns that are pre-defined for using video.\u00a0 Available patterns for video will differ depending on the theme that you are using.\u00a0\u00a0<\/p>\n\n\n\n<p>You can also go to the <a href=\"https:\/\/wordpress.org\">WordPress.org site<\/a> and copy patterns that have been placed in the <em>Pattern <\/em>library.<\/p>\n\n\n\n<p><strong>Patterns from the Theme<\/strong><\/p>\n\n\n\n<p>These patterns are provided with the <strong>Twenty Twenty-two theme<\/strong>.<\/p>\n\n\n\n<p><strong>Video Trailer<\/strong><strong><br><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"417\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-video-trailer-1024x417.jpg\" alt=\"Video Trailer Pattern\" class=\"wp-image-97853\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-video-trailer-1024x417.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-video-trailer-300x122.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-video-trailer-768x313.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-video-trailer.jpg 1166w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>This pattern has a particular color scheme and stretches across the entire width of the website.\u00a0 It is made to be placed in the body of your content.<br><\/p>\n\n\n\n<p><strong>Header Video<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"607\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-header-video-1024x607.jpg\" alt=\"Header video pattern\" class=\"wp-image-97854\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-header-video-1024x607.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-header-video-300x178.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-header-video-768x455.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-header-video.jpg 1394w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>This pattern is made to showcase a video at the top of your content.\u00a0\u00a0<br><\/p>\n\n\n\n<p><strong>Page Layout Pattern<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"934\" height=\"1024\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-page-layout-934x1024.jpg\" alt=\"Page layout with video pattern\" class=\"wp-image-97838\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-page-layout-934x1024.jpg 934w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-page-layout-274x300.jpg 274w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-page-layout-768x842.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-page-layout-1402x1536.jpg 1402w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/pattern-page-layout.jpg 1429w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>The third pattern available within the Twenty Twenty-two theme is the Page Layout Pattern.\u00a0 This pattern is for an entire page or post and includes a 2-column section under a title, a graphic, and a video section at the bottom of the page.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Patterns from WordPress.org<\/strong><\/p>\n\n\n\n<p>WordPress has also made patterns freely available to the public using the WordPress.org site.\u00a0 To obtain one, simply go to the WordPress.org website, then click on <strong>Patterns <\/strong>in the menu.\u00a0 You can then search through the patterns, find the ones you like, and copy them directly to your WordPress site.<\/p>\n\n\n\n<p>We searched the Patterns and found two patterns for videos.\u00a0 People are continually adding patterns, so there may be more at any point.\u00a0\u00a0<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Banner with Video fullwidth<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"570\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/banner-vide-fw-online-1024x570.jpg\" alt=\"Online pattern - banner with background video\" class=\"wp-image-97855\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/banner-vide-fw-online-1024x570.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/banner-vide-fw-online-300x167.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/banner-vide-fw-online-768x428.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/banner-vide-fw-online.jpg 1121w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>This pattern provides four banner types with a video background.\u00a0 Each type has either text or graphics in different locations on top of the video background.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Hero Banner with video background<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"570\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/hero-banner-online-1024x570.jpg\" alt=\"Hero banner with text and background video - online pattern\" class=\"wp-image-97856\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/hero-banner-online-1024x570.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/hero-banner-online-300x167.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/hero-banner-online-768x428.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/hero-banner-online.jpg 1121w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>This pattern includes a single banner with title and subtitle text along with a video background.<\/p>\n\n\n\n<p>You now know how to add videos to your WordPress site using blocks or patterns through the full site editing system.  <\/p>\n\n\n<p>Learn more about the new WordPress editor, Gutenberg, and the capabilities of the separate Gutenberg plugin with our <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg?mktgp=t&amp;utm_source=id$$post_id$$&amp;utm_medium=link&amp;utm_campaign=supportcenter&amp;utm_term=wp-gutenberg\">helpful Gutenberg articles<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A common task with adding content is adding a video to a post or page.\u00a0 This tutorial will guide you through the process of adding videos to your WordPress site.\u00a0 We will discuss common concerns to think about before using video content,\u00a0 using the blocks and patterns available in the full site editing system (FSE),<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/\"> Read More ><\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4532],"tags":[],"class_list":["post-97835","post","type-post","status-publish","format-standard","hentry","category-full-site-editing"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Add Video Using Blocks or Patterns with WordPress FSE | InMotion Hosting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Video Using Blocks or Patterns with WordPress FSE | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"A common task with adding content is adding a video to a post or page.\u00a0 This tutorial will guide you through the process of adding videos to your WordPress site.\u00a0 We will discuss common concerns to think about before using video content,\u00a0 using the blocks and patterns available in the full site editing system (FSE), Read More &gt;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-16T04:53:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-16T05:02:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-fse-1024x538.jpg\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\"},\"headline\":\"How to Add Video Using Blocks or Patterns with WordPress FSE\",\"datePublished\":\"2022-06-16T04:53:43+00:00\",\"dateModified\":\"2022-06-16T05:02:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/\"},\"wordCount\":1448,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-fse-1024x538.jpg\",\"articleSection\":[\"Full Site Editing\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/\",\"name\":\"How to Add Video Using Blocks or Patterns with WordPress FSE | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-fse-1024x538.jpg\",\"datePublished\":\"2022-06-16T04:53:43+00:00\",\"dateModified\":\"2022-06-16T05:02:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-fse.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-fse.jpg\",\"width\":1200,\"height\":630,\"caption\":\"How to Add Video Using Blocks or Patterns\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Video Using Blocks or Patterns with WordPress FSE\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\",\"name\":\"InMotion Hosting Contributor\",\"description\":\"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/inmotion-hosting\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Video Using Blocks or Patterns with WordPress FSE | InMotion Hosting","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Video Using Blocks or Patterns with WordPress FSE | InMotion Hosting","og_description":"A common task with adding content is adding a video to a post or page.\u00a0 This tutorial will guide you through the process of adding videos to your WordPress site.\u00a0 We will discuss common concerns to think about before using video content,\u00a0 using the blocks and patterns available in the full site editing system (FSE), Read More >","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2022-06-16T04:53:43+00:00","article_modified_time":"2022-06-16T05:02:57+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-fse-1024x538.jpg","type":"","width":"","height":""}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b"},"headline":"How to Add Video Using Blocks or Patterns with WordPress FSE","datePublished":"2022-06-16T04:53:43+00:00","dateModified":"2022-06-16T05:02:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/"},"wordCount":1448,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-fse-1024x538.jpg","articleSection":["Full Site Editing"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/","name":"How to Add Video Using Blocks or Patterns with WordPress FSE | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-fse-1024x538.jpg","datePublished":"2022-06-16T04:53:43+00:00","dateModified":"2022-06-16T05:02:57+00:00","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-fse.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/06\/video-fse.jpg","width":1200,"height":630,"caption":"How to Add Video Using Blocks or Patterns"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/full-site-editing\/add-video-blocks-patterns\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Add Video Using Blocks or Patterns with WordPress FSE"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b","name":"InMotion Hosting Contributor","description":"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!","sameAs":["https:\/\/www.linkedin.com\/company\/inmotion-hosting\/","https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/97835","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=97835"}],"version-history":[{"count":5,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/97835\/revisions"}],"predecessor-version":[{"id":97861,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/97835\/revisions\/97861"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=97835"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=97835"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=97835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}