{"id":476,"date":"2018-06-11T16:56:00","date_gmt":"2018-06-11T16:56:00","guid":{"rendered":"http:\/\/bfuller.local\/wordpress\/styleguide\/?page_id=476"},"modified":"2025-11-10T15:54:18","modified_gmt":"2025-11-10T15:54:18","slug":"videos","status":"publish","type":"page","link":"https:\/\/www.uri.edu\/wordpress\/components\/videos\/","title":{"rendered":"Videos"},"content":{"rendered":"\n<p class=\"type-intro\">Use videos to embed Youtube and Vimeo content with minimal branding. Video components are full-width, and they allow you to customize the poster image.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>Here&#8217;s an example video:<\/p>\n\n\n<section class=\"cl-wrapper cl-video-wrapper\"><div class=\"cl-video  \"><div class=\"poster\" id=\"demo1\" data-video=\"https:\/\/vimeo.com\/377092097\/13e9ce1d78\" data-platform=\"vimeo\" data-showinfo=\"1\"><img decoding=\"async\" src=\"https:\/\/i.vimeocdn.com\/video\/836406578-7d3f26ecd2c9e6771881276154b34a5ba6a0ab33d4df09df7f3d0ed143f75aa0-d\" alt=\"\"\/><\/div><\/div><\/section>\n\n\n\n<p>Videos use the YouTube or Vimeo poster image by default, but this can be overridden with a custom image.<\/p>\n\n\n\n<p>A title and excerpt can be added, which will appear as an overlay when the video is not playing:<\/p>\n\n\n<section class=\"cl-wrapper cl-video-wrapper\"><div class=\"cl-video  \"><div class=\"overlay\"><h1>Campus Beauty<\/h1><p>Explore our small, beautiful place from the air<\/p><\/div><div class=\"poster\" id=\"demo2\" data-video=\"https:\/\/vimeo.com\/377092097\/13e9ce1d78\" data-platform=\"vimeo\" data-showinfo=\"0\"><img decoding=\"async\" src=\"https:\/\/i.vimeocdn.com\/video\/836406578-7d3f26ecd2c9e6771881276154b34a5ba6a0ab33d4df09df7f3d0ed143f75aa0-d\" alt=\"\"\/><\/div><\/div><\/section>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a Video<\/h2>\n\n\n\n<p>On sites using the Block Editor, videos can be implemented by using the shortcode (see the below documentation).<\/p>\n\n\n\n<p>On sites using the older Classic Editor, videos can be added by choosing the Video pictograph (<img decoding=\"async\" src=\"https:\/\/www.uri.edu\/wordpress\/wp-content\/uploads\/home\/sites\/7\/video_wysiwyg.png\" alt=\"Video WYSIWYG toolbar icon\" class=\"wysiwyg-icon\">) from the editor&#8217;s toolbar. Use the editor dialogue to add content and adjust options. To edit the video later, double-click the video preview to show the editor dialogue again.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div class=\"wp-block-group docs-section\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h1 class=\"wp-block-heading\">Using the shortcode<\/h1>\n\n\n\n<p>Videos can be implemented with the shortcode&nbsp;<code class=\"shortcode\">cl-video<\/code>.<\/p>\n\n\n\n<p class=\"code shortcode\">[cl-video vid=\"https:\/\/vimeo.com\/377092097\/13e9ce1d78\"]<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Attributes<\/h2>\n\n\n\n<div class=\"wp-block-columns shortcode-attributes 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<h3 class=\"wp-block-heading\">vid<\/h3>\n\n\n\n<p>(string) (required)<\/p>\n\n\n\n<p>The YouTube or Vimeo URL<\/p>\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\">img<\/h3>\n\n\n\n<p>(mixed) (optional)<\/p>\n\n\n\n<p>The source URL for the poster image. If no image is set, the YouTube or Vimeo poster image is used by default.<\/p>\n\n\n\n<p>(default value: none)<\/p>\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\">id<\/h3>\n\n\n\n<p>(string) (optional)<\/p>\n\n\n\n<p>Set a unique id for the element<\/p>\n\n\n\n<p>(default value: none)<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns shortcode-attributes 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<h3 class=\"wp-block-heading\">alt<\/h3>\n\n\n\n<p>(string) (optional)<\/p>\n\n\n\n<p>Set alt text for the poster image<\/p>\n\n\n\n<p>(default value: none)<\/p>\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\">title<\/h3>\n\n\n\n<p>(string) (optional)<\/p>\n\n\n\n<p>Set a title to be overlaid when the video is not playing<\/p>\n\n\n\n<p>(default value: none)<\/p>\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\">excerpt<\/h3>\n\n\n\n<p>(string) (optional)<\/p>\n\n\n\n<p>Set an excerpt to be overlaid when the video is not playing<\/p>\n\n\n\n<p>(default value: none)<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns shortcode-attributes 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<h3 class=\"wp-block-heading\">class<\/h3>\n\n\n\n<p>(string) (optional)<\/p>\n\n\n\n<p>Set custom CSS class(es)<\/p>\n\n\n\n<p>(default value: none)<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Use videos to embed Youtube and Vimeo content with minimal branding. Video components are full-width, and they allow you to customize the poster image. Overview Here&#8217;s an example video: Videos use the YouTube or Vimeo poster image by default, but this can be overridden with a custom image. A title and excerpt can be added, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":188,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-476","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=476"}],"version-history":[{"count":23,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/476\/revisions"}],"predecessor-version":[{"id":2816,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/476\/revisions\/2816"}],"up":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/188"}],"wp:attachment":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}