{"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":"2020-09-18T12:35:08","modified_gmt":"2020-09-18T16:35:08","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-youtube alignfull wp-block-embed is-type-video is-provider-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><figcaption>This is a video hosted on YouTube.<\/figcaption><\/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-vimeo wp-block-embed is-type-video is-provider-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\">Two Columns, Video on the Left, Text on the Right<\/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:66.66%\">\n<p><strong>Block used:<\/strong> &#8220;Columns&#8221; block for the column structure. The left column has a YouTube video and the right column has text.<\/p>\n\n\n\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\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\">\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Meet the Class of 2023\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/WtWNh5xdF4Y?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<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Videos can be added and they will stack on mobile<\/h3>\n\n\n\n<p>By default, a column layout will responsively stack on mobile when a certain breakpoint width is reached. If you look at this page on mobile or &#8216;fake it&#8217; by making your browser width smaller, you can roughly simulate the mobile view.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link\">Call to action<\/a><\/div>\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\">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<p class=\"has-text-align-center has-large-font-size\">Cover block with a video background<\/p>\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":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"smasonla","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":16,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/3723\/revisions"}],"predecessor-version":[{"id":5332,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/3723\/revisions\/5332"}],"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}]}}