{"id":3723,"date":"2019-09-06T14:13:01","date_gmt":"2019-09-06T14:13:01","guid":{"rendered":"https:\/\/wptest.sdelling.w3.uvm.edu\/?p=3723"},"modified":"2026-05-14T16:21:19","modified_gmt":"2026-05-14T20:21:19","slug":"video-styles","status":"publish","type":"post","link":"https:\/\/blog.uvm.edu\/manual\/2019\/09\/06\/video-styles\/","title":{"rendered":"Video Styles"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p class=\"intro--left\">Inserting video into your website is easy if your video is already publicly hosted on YouTube or Vimeo. Some types of video displays require the video to be hosted on the WordPress website.<\/p>\n\n\n\n<p><strong>To add a YouTube or Vimeo hosted video to your page:<\/strong> While you are on the page you wish to edit, click on the little [+] icon at the top left of your page. Type &#8220;video&#8221; in the Block search field to filter all blocks by &#8220;video&#8221;. Scroll down to &#8220;embeds&#8221; and select the desired video block &#8211; either YouTube or Vimeo &#8211; depending on where your video is hosted. Type in the URL of your video and the component will load into your page. <\/p>\n\n\n\n<p>Here are some different ways you can insert video into your website. <\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Agroforestry Cultivation of Shiitake Mushrooms\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/JJoXqAa51QI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Agroforestry Cultivation of Shiitake Mushrooms\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/JJoXqAa51QI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed alignfull is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Agroforestry Cultivation of Shiitake Mushrooms\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/JJoXqAa51QI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><strong>Tube notes:<\/strong> As for the right way to embed&nbsp;<strong>YouTube<\/strong>&nbsp;videos: When it comes to Gutenberg, there is a YouTube embed block, so I believe that will be the right way. However, if you chose to embed YouTube video with the iframe option that is available on YouTube, you have control over when to start playing the video, whether you wanted to display the controls or not, so in some cases, this will be the better way. To add the iframe, you have to select the&nbsp;<a href=\"https:\/\/gogutenberg.com\/blocks\/custom-html\/\">custom HTML block<\/a>&nbsp;rather than the YouTube embed block.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Vimeo video<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Tremblant Takeover 2019\" src=\"https:\/\/player.vimeo.com\/video\/330657330?dnt=1&amp;app_id=122963\" width=\"640\" height=\"360\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Video Banner with Modal Overlay and Title<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p>You can place a video behind text by using the &#8220;cover&#8221; block. The video can have a tint overlay of any color and transparency. The copy can be flush left, centered or flush right. It&#8217;s important to note here that in this scenario, you have to host the video yourself in the WordPress Media library. (MP4 seems to be the preferred format here). You cannot embed a video from YouTube or Vimeo in this scenario.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-cover has-background-dim\"><video class=\"wp-block-cover__video-background\" autoplay muted loop playsinline src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/09\/iPhone-6-Plus-Gold.mov\"><\/video><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n\n<p class=\"has-text-align-center has-large-font-size\">Cover block with a video background<\/p>\n\n<\/div><\/div>\n\n\n\n<div style=\"height:120px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Social Embeds<\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>If you are looking to embed social posts into your site, <a href=\"https:\/\/wptest.sdelling.w3.uvm.edu\/blocks-embeds\/\">check out this page<\/a>.<\/p>\n\n\n\n<div style=\"height:120px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Inserting video into your website is easy if your video is already publicly hosted on YouTube or Vimeo. Some types of video displays require the video to be hosted on the WordPress website. To add a YouTube or Vimeo hosted video to your page: While you are on the page you wish to edit, click &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/blog.uvm.edu\/manual\/2019\/09\/06\/video-styles\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Video Styles&#8221;<\/span><\/a><\/p>\n","protected":false},"author":5625,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[246029,66159,449],"tags":[141],"class_list":["post-3723","post","type-post","status-publish","format-standard","hentry","category-media-2","category-social","category-uvm","tag-video","entry"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"Susan Mason Lazarev","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"Susan Mason Lazarev","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_comment":0,"rttpg_category":"<a href=\"https:\/\/blog.uvm.edu\/manual\/category\/media-2\/\" rel=\"category tag\">Media<\/a> <a href=\"https:\/\/blog.uvm.edu\/manual\/category\/social\/\" rel=\"category tag\">Social<\/a> <a href=\"https:\/\/blog.uvm.edu\/manual\/category\/uvm\/\" rel=\"category tag\">UVM<\/a>","rttpg_excerpt":"Inserting video into your website is easy if your video is already publicly hosted on YouTube or Vimeo. Some types of video displays require the video to be hosted on the WordPress website. To add a YouTube or Vimeo hosted video to your page: While you are on the page you wish to edit, click&hellip;","_links":{"self":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/3723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/users\/5625"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/comments?post=3723"}],"version-history":[{"count":18,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/3723\/revisions"}],"predecessor-version":[{"id":5526,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/3723\/revisions\/5526"}],"wp:attachment":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/media?parent=3723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/categories?post=3723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/tags?post=3723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}