{"id":3084,"date":"2024-08-19T18:14:21","date_gmt":"2024-08-19T22:14:21","guid":{"rendered":"https:\/\/sites.georgetown.edu\/1789-documentation\/?page_id=3084"},"modified":"2024-09-12T16:43:41","modified_gmt":"2024-09-12T20:43:41","slug":"design-promo-with-video","status":"publish","type":"page","link":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/design-promo-with-video\/","title":{"rendered":"Design: Promo with Video"},"content":{"rendered":"\n<h2 class=\"wp-block-heading  is-style-with-no-margin-bottom body-text-heading\">Table of Contents<\/h2>\n\n\n\n<ul class=\"wp-block-list wp-block-list list list-unordered\">\n<li><a href=\"#usage\">Usage<\/a><\/li>\n\n\n\n<li><a href=\"#image\">Recommended Image Ratio &amp; Dimension(s)<\/a><\/li>\n\n\n\n<li><a href=\"#variations\">Variations<\/a><\/li>\n\n\n\n<li><a href=\"#examples\">Examples<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading  is-style-with-no-margin-bottom body-text-heading\" id=\"usage\">Usage<\/h2>\n\n\n\n<p class=\"wp-block-paragraph body-text\">The Promo with Video block is recommended for the Homepage and Landing pages. <\/p>\n\n\n\n<h2 class=\"wp-block-heading  is-style-with-no-margin-bottom body-text-heading\" id=\"image\">Recommended Image Ratio &amp; Dimension(s)<\/h2>\n\n\n\n<ul class=\"wp-block-list wp-block-list list list-unordered\">\n<li>Poster Image\n<ul class=\"wp-block-list wp-block-list list list-unordered\">\n<li>Ratio:16:9<\/li>\n\n\n\n<li>Dimensions 2000px x 1125px<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Background image: \n<ul class=\"wp-block-list wp-block-list list list-unordered\">\n<li>\u2265 3000px x 1688px <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading  is-style-with-no-margin-bottom body-text-heading\" id=\"variations\">Variations<\/h2>\n\n\n\n<ul class=\"wp-block-list wp-block-list list list-unordered\">\n<li>Poster image on left<\/li>\n\n\n\n<li>Poster image on right<\/li>\n\n\n\n<li>No background image<\/li>\n\n\n\n<li>With background image\n<ul class=\"wp-block-list wp-block-list list list-unordered\">\n<li>The image will automatically be lighten and have a greyscale filter applied.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading  is-style-with-no-margin-bottom body-text-heading\" id=\"examples\">Examples<\/h2>\n\n\n\n<h3 class=\"wp-block-heading body-text-heading\">No Background Image With Poster On Left<\/h3>\n\n\n<div class=\"block-promo-video is-align-start \"><div class=\"block-promo-video-inner\"><div class=\"child-video block-promo-video-video\"><div class=\"child-video-inner\"data-video-id=\"ORG1R_lwjtY?feature=shared\"><div class=\"child-video-poster\" style=\"--child-video-backgroundImage: url('https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2024\/08\/170412_SpringCampus-84.jpg')\"><button class=\"child-video-play\" type=\"button\" aria-label=\"Play this video\">\n            <span class=\"fa-icon fa-fw fa-solid fa-play\" aria-hidden=\"true\"><\/span>\n          <\/button>\n        <\/div><div class=\"child-video-video\"id=\"child-video-ORG1R_lwjtY?feature=shared-qwwcqwa5z5fo\"><\/div><\/div><\/div><div class=\"block-promo-video-promo\"><h2 class=\"block-promo-video-heading\">Thrive on Campus and Beyond<\/h2><p class=\"block-promo-video-description\">In just one day at Georgetown, go from Lauinger Library to the Library of Congress. Dissect Shakespeare in class then catch an early show at the Kennedy Center. Here, you\u2019ll experience the best of both worlds \u2013 a campus that feels like home in the middle of a vibrant city.<\/p><div class=\"child-link-cta-link \"><a class=\"child-link-cta-link-link block-promo-video-link\"\n      href=\"https:\/\/georgetown.edu\"><span class=\"child-link-cta-link-text\">Link CTA<\/span><span\n          class=\"child-link-cta-link-trailing fa fa-fw fa-angle-right\"\n          aria-hidden=\"true\"\n        ><\/span><\/a><\/div><!-- <a class=\"block-promo-video-link\" href=\"https:\/\/georgetown.edu\">\n              <span>Link CTA<\/span>\n            <\/a> --><\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading body-text-heading\">No Background Image With Poster On Right<\/h3>\n\n\n<div class=\"block-promo-video is-align-end \"><div class=\"block-promo-video-inner\"><div class=\"child-video block-promo-video-video\"><div class=\"child-video-inner\"data-video-id=\"ORG1R_lwjtY?feature=shared\"><div class=\"child-video-poster\" style=\"--child-video-backgroundImage: url('https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2024\/08\/170412_SpringCampus-84.jpg')\"><button class=\"child-video-play\" type=\"button\" aria-label=\"Play this video\">\n            <span class=\"fa-icon fa-fw fa-solid fa-play\" aria-hidden=\"true\"><\/span>\n          <\/button>\n        <\/div><div class=\"child-video-video\"id=\"child-video-ORG1R_lwjtY?feature=shared-u2lbst0r6jca\"><\/div><\/div><\/div><div class=\"block-promo-video-promo\"><h2 class=\"block-promo-video-heading\">Thrive on Campus and Beyond<\/h2><p class=\"block-promo-video-description\">In just one day at Georgetown, go from Lauinger Library to the Library of Congress. Dissect Shakespeare in class then catch an early show at the Kennedy Center. Here, you\u2019ll experience the best of both worlds \u2013 a campus that feels like home in the middle of a vibrant city.<\/p><div class=\"child-link-cta-link \"><a class=\"child-link-cta-link-link block-promo-video-link\"\n      href=\"https:\/\/georgetown.edu\"><span class=\"child-link-cta-link-text\">Link CTA<\/span><span\n          class=\"child-link-cta-link-trailing fa fa-fw fa-angle-right\"\n          aria-hidden=\"true\"\n        ><\/span><\/a><\/div><!-- <a class=\"block-promo-video-link\" href=\"https:\/\/georgetown.edu\">\n              <span>Link CTA<\/span>\n            <\/a> --><\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading body-text-heading\">With Background Image With Poster on Left<\/h3>\n\n\n<div class=\"block-promo-video is-align-start \"style=\"--block-promoVideo-backgroundSource: url(https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2024\/08\/170412_SpringCampus-84.jpg)\"><div class=\"block-promo-video-inner\"><div class=\"child-video block-promo-video-video\"><div class=\"child-video-inner\"data-video-id=\"ORG1R_lwjtY?feature=shared\"><div class=\"child-video-poster\" style=\"--child-video-backgroundImage: url('https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2024\/08\/170412_SpringCampus-84.jpg')\"><button class=\"child-video-play\" type=\"button\" aria-label=\"Play this video\">\n            <span class=\"fa-icon fa-fw fa-solid fa-play\" aria-hidden=\"true\"><\/span>\n          <\/button>\n        <\/div><div class=\"child-video-video\"id=\"child-video-ORG1R_lwjtY?feature=shared-8wixh0g96rgn\"><\/div><\/div><\/div><div class=\"block-promo-video-promo\"><h2 class=\"block-promo-video-heading\">Thrive on Campus and Beyond<\/h2><p class=\"block-promo-video-description\">In just one day at Georgetown, go from Lauinger Library to the Library of Congress. Dissect Shakespeare in class then catch an early show at the Kennedy Center. Here, you\u2019ll experience the best of both worlds \u2013 a campus that feels like home in the middle of a vibrant city.<\/p><div class=\"child-link-cta-link \"><a class=\"child-link-cta-link-link block-promo-video-link\"\n      href=\"https:\/\/georgetown.edu\"><span class=\"child-link-cta-link-text\">Link CTA<\/span><span\n          class=\"child-link-cta-link-trailing fa fa-fw fa-angle-right\"\n          aria-hidden=\"true\"\n        ><\/span><\/a><\/div><!-- <a class=\"block-promo-video-link\" href=\"https:\/\/georgetown.edu\">\n              <span>Link CTA<\/span>\n            <\/a> --><\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading body-text-heading\">With Background Image With Poster on Right<\/h3>\n\n\n<div class=\"block-promo-video is-align-end \"style=\"--block-promoVideo-backgroundSource: url(https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2024\/08\/170412_SpringCampus-84.jpg)\"><div class=\"block-promo-video-inner\"><div class=\"child-video block-promo-video-video\"><div class=\"child-video-inner\"data-video-id=\"ORG1R_lwjtY?feature=shared\"><div class=\"child-video-poster\" style=\"--child-video-backgroundImage: url('https:\/\/sites.georgetown.edu\/1789-documentation\/wp-content\/uploads\/sites\/525\/2024\/08\/170412_SpringCampus-84.jpg')\"><button class=\"child-video-play\" type=\"button\" aria-label=\"Play this video\">\n            <span class=\"fa-icon fa-fw fa-solid fa-play\" aria-hidden=\"true\"><\/span>\n          <\/button>\n        <\/div><div class=\"child-video-video\"id=\"child-video-ORG1R_lwjtY?feature=shared-ygzomx3sb2c5\"><\/div><\/div><\/div><div class=\"block-promo-video-promo\"><h2 class=\"block-promo-video-heading\">Thrive on Campus and Beyond<\/h2><p class=\"block-promo-video-description\">In just one day at Georgetown, go from Lauinger Library to the Library of Congress. Dissect Shakespeare in class then catch an early show at the Kennedy Center. Here, you\u2019ll experience the best of both worlds \u2013 a campus that feels like home in the middle of a vibrant city.<\/p><div class=\"child-link-cta-link \"><a class=\"child-link-cta-link-link block-promo-video-link\"\n      href=\"https:\/\/georgetown.edu\"><span class=\"child-link-cta-link-text\">Link CTA<\/span><span\n          class=\"child-link-cta-link-trailing fa fa-fw fa-angle-right\"\n          aria-hidden=\"true\"\n        ><\/span><\/a><\/div><!-- <a class=\"block-promo-video-link\" href=\"https:\/\/georgetown.edu\">\n              <span>Link CTA<\/span>\n            <\/a> --><\/div><\/div><\/div>\n\n<div class=\"gu-block gu-container  gu-block-quick-links gu-block-full has-text-align-center     \"><div class=\"gu-block gu-container gu-container-inner gu-block-quick-links-inner gu-block-wide \"><nav class=\"gu-block-quick-links-nav gu-cards gu-sidebar\" aria-label=\"Quick Links\">\n\n    <p class=\"gu-block gu-paragraph body-text gu-block-quick-links-text gu-sidebar-aside\">Quick Links<\/p>\n<ol class=\"gu-block gu-list list-ordered gu-block-quick-links-list gu-cards-content gu-sidebar-main is-style-none \"><li class=\"list-item gu-block-quick-links-item gu-cards-card\"><a class=\"gu-link gu-block gu-block-link-cta gu-block-quick-links-link gu-block-link-cta-btn gu-block-link-cta-gray \" href=\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/promo-with-video\/\">How To: Promo with Video<\/a><\/li>\n<li class=\"list-item gu-block-quick-links-item gu-cards-card\"><a class=\"gu-link gu-block gu-block-link-cta gu-block-quick-links-link gu-block-link-cta-btn gu-block-link-cta-gray \" href=\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/\">More Promote Blocks<\/a><\/li>\n<\/ol>\n<\/nav><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Table of Contents Usage The Promo with Video block is recommended for the Homepage and Landing pages. Recommended Image Ratio &amp; Dimension(s) Variations Examples No Background Image With Poster On Left No Background Image With Poster On Right With Background Image With Poster on Left With Background Image With Poster on Right<\/p>\n","protected":false},"author":1387,"featured_media":0,"parent":166,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"page-landing.php","meta":{"gu_featured_image_display":true,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-3084","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Design: Promo with Video - 1789 Handbook<\/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:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/design-promo-with-video\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design: Promo with Video - 1789 Handbook\" \/>\n<meta property=\"og:description\" content=\"Table of Contents Usage The Promo with Video block is recommended for the Homepage and Landing pages. Recommended Image Ratio &amp; Dimension(s) Variations Examples No Background Image With Poster On Left No Background Image With Poster On Right With Background Image With Poster on Left With Background Image With Poster on Right\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/design-promo-with-video\/\" \/>\n<meta property=\"og:site_name\" content=\"1789 Handbook\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-12T20:43:41+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/design-promo-with-video\/\",\"url\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/design-promo-with-video\/\",\"name\":\"Design: Promo with Video - 1789 Handbook\",\"isPartOf\":{\"@id\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/#website\"},\"datePublished\":\"2024-08-19T22:14:21+00:00\",\"dateModified\":\"2024-09-12T20:43:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/design-promo-with-video\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/design-promo-with-video\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/design-promo-with-video\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Block Catalog\",\"item\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Promote\",\"item\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Promo with Video\",\"item\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Design: Promo with Video\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/#website\",\"url\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/\",\"name\":\"1789 Handbook\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sites.georgetown.edu\/1789-documentation\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Design: Promo with Video - 1789 Handbook","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:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/design-promo-with-video\/","og_locale":"en_US","og_type":"article","og_title":"Design: Promo with Video - 1789 Handbook","og_description":"Table of Contents Usage The Promo with Video block is recommended for the Homepage and Landing pages. Recommended Image Ratio &amp; Dimension(s) Variations Examples No Background Image With Poster On Left No Background Image With Poster On Right With Background Image With Poster on Left With Background Image With Poster on Right","og_url":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/design-promo-with-video\/","og_site_name":"1789 Handbook","article_modified_time":"2024-09-12T20:43:41+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/design-promo-with-video\/","url":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/design-promo-with-video\/","name":"Design: Promo with Video - 1789 Handbook","isPartOf":{"@id":"https:\/\/sites.georgetown.edu\/1789-documentation\/#website"},"datePublished":"2024-08-19T22:14:21+00:00","dateModified":"2024-09-12T20:43:41+00:00","breadcrumb":{"@id":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/design-promo-with-video\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/design-promo-with-video\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/design-promo-with-video\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sites.georgetown.edu\/1789-documentation\/"},{"@type":"ListItem","position":2,"name":"Block Catalog","item":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/"},{"@type":"ListItem","position":3,"name":"Promote","item":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/"},{"@type":"ListItem","position":4,"name":"Promo with Video","item":"https:\/\/sites.georgetown.edu\/1789-documentation\/block-catalog\/promote\/promo-with-video\/"},{"@type":"ListItem","position":5,"name":"Design: Promo with Video"}]},{"@type":"WebSite","@id":"https:\/\/sites.georgetown.edu\/1789-documentation\/#website","url":"https:\/\/sites.georgetown.edu\/1789-documentation\/","name":"1789 Handbook","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sites.georgetown.edu\/1789-documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/pages\/3084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/users\/1387"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/comments?post=3084"}],"version-history":[{"count":8,"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/pages\/3084\/revisions"}],"predecessor-version":[{"id":3586,"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/pages\/3084\/revisions\/3586"}],"up":[{"embeddable":true,"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/pages\/166"}],"wp:attachment":[{"href":"https:\/\/sites.georgetown.edu\/1789-documentation\/wp-json\/wp\/v2\/media?parent=3084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}