{"id":2714,"date":"2023-05-28T00:44:03","date_gmt":"2023-05-28T00:44:03","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/interactive-components-video\/"},"modified":"2025-12-09T17:05:49","modified_gmt":"2025-12-09T17:05:49","slug":"interactive-components-video","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/interactive-components-video\/","title":{"rendered":"Interactive Components: Video"},"content":{"rendered":"\n<p class=\"\">&nbsp;<\/p>\n\n\n\n<div class=\"hs-responsive-embed-wrapper hs-responsive-embed\" style=\"width: 100%; height: auto; position: relative; overflow: hidden; padding: 0; max-width: 640px; max-height: 360px; min-width: 256px; margin: 10px auto; display: block; clear: both;\">\n<div class=\"hs-responsive-embed-inner-wrapper\" style=\"position: relative; overflow: hidden; max-width: 100%; padding-bottom: 56.25%; margin: 0;\"><iframe loading=\"lazy\" class=\"hs-responsive-embed-iframe\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;\" src=\" https:\/\/player.vimeo.com\/video\/138021603 \" width=\"640\" height=\"360\" allowfullscreen=\"allowfullscreen\" data-service=\"vimeo\"><\/iframe><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Let\u2019s get started<\/h3>\n\n\n\n<p class=\"\">To begin, you will want to drag the video icon from the Interactive category onto your page where you would like to display your video. Next, you will want to define the General Settings from within the Content tab to select the video type (i.e. Vimeo, YouTube, Brightcove, Ooyala) and then define the width and height of your video.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Video Settings<\/h4>\n\n\n\n<p class=\"\">Once the General Settings are defined, you will also want to define specific settings for your video type. The specific video that plays is defined within the Video Settings. Below, please find a list of the available settings that you can define for Vimeo, YouTube, Brightcove and Ooyala. These settings are defined within the Content tab of your creative studio. In most cases, the Video ID defines which specific video plays, however, please note that Ooyala requires that the full embed code is used.<\/p>\n\n\n\n<div class=\"hs-table-align-center\" style=\"overflow-x: auto; max-width: 100%; width: 100%; margin-left: auto; margin-right: auto;\" data-hs-responsive-table=\"true\">\n<table style=\"width: 100%; border-collapse: collapse; table-layout: fixed; border: 1px solid #99acc2; height: 488px;\">\n<tbody>\n<tr style=\"height: 35px;\">\n<td style=\"width: 24.9637%; padding: 4px; height: 35px; text-align: left;\"><strong>YouTube<\/strong><\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 35px; text-align: left;\"><strong>Vimeo<\/strong><\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 35px; text-align: left;\"><strong>Ooyala<\/strong><\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 35px; text-align: left;\"><strong>Brightcove<\/strong><\/td>\n<\/tr>\n<tr style=\"height: 45px;\">\n<td style=\"width: 24.9637%; padding: 4px; height: 45px;\">Video ID<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 45px;\">Video ID<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 45px;\">Branding ID<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 45px;\">Video ID<\/td>\n<\/tr>\n<tr style=\"height: 44px;\">\n<td style=\"width: 24.9637%; padding: 4px; height: 44px;\">Display Controls<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 44px;\">Display Title<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 44px;\">Embed code<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 44px;\">Account Number<\/td>\n<\/tr>\n<tr style=\"height: 41px;\">\n<td style=\"width: 24.9637%; padding: 4px; height: 41px;\">Display Information<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 41px;\">Display Byline<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 41px;\">Display Controls<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 41px;\">Display Controls<\/td>\n<\/tr>\n<tr style=\"height: 45px;\">\n<td style=\"width: 24.9637%; padding: 4px; height: 45px;\">Show Related Videos<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 45px;\">Display Portrait<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 45px;\">Autoplay Video<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 45px;\">Autoplay Video<\/td>\n<\/tr>\n<tr style=\"height: 165px;\">\n<td style=\"width: 24.9637%; padding: 4px; height: 165px;\">Autoplay Video<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 165px;\">Control color (used to specify the color of the video controls &#8211; defined using a hex number).<\/td>\n<td style=\"width: 24.9637%; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; height: 165px;\">Loop Video<\/td>\n<td style=\"width: 24.9637%; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; height: 165px;\">Loop Video<\/td>\n<\/tr>\n<tr style=\"height: 51px;\">\n<td style=\"width: 24.9637%; padding: 4px; height: 51px;\">Loop Video<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 51px;\">Autoplay Video<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 51px;\">&nbsp;<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 51px;\">&nbsp;<\/td>\n<\/tr>\n<tr style=\"height: 61px;\">\n<td style=\"width: 24.9637%; padding: 4px; height: 61px;\">Remove YouTube Branding<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 61px;\">Loop Video<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 61px;\">&nbsp;<\/td>\n<td style=\"width: 24.9637%; padding: 4px; height: 61px;\">&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Background Video Support<\/h4>\n\n\n\n<p class=\"\">As you\u2019ll see, your creative studio video editing tab gives you even more options when adding visuals to your creatives.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"899\" height=\"457\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/Screenshot_1.png\" alt=\"\" class=\"wp-image-8072\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/Screenshot_1.png 899w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/Screenshot_1-300x153.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/Screenshot_1-768x390.png 768w\" sizes=\"auto, (max-width: 899px) 100vw, 899px\" \/><\/figure>\n\n\n\n<p class=\"\">Not only can you add a video anywhere within your creative, but you also have the ability to add video as background to a container or to the page as a whole. Under \u2018Video Placement\u2019 choices, you have three options for video placement:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Inline<\/li>\n\n\n\n<li class=\"\">Container Background<\/li>\n\n\n\n<li class=\"\">Page Background<strong>Curious about the difference between the three choices? Check them out!<\/strong><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Inline<\/h4>\n\n\n\n<p class=\"\">When adding any video to one of your creatives, the video will automatically be added as inline to the page. From here, you are free to add it to any container within the page with options for resizing, just as you have seen previous to this release.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"996\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-22-1024x996.png\" alt=\"\" class=\"wp-image-8084\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-22-1024x996.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-22-300x292.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-22-768x747.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-22-50x50.png 50w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-22.png 1134w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Container Background<\/h4>\n\n\n\n<p class=\"\">This allows the video to fill the entire background of any container of your choice within the page, with further options to set the video on autoplay or looping.<\/p>\n\n\n\n<p class=\"\">Container background support for video will appear within desktop views. <strong>However<\/strong>, within mobile, container background video will be hidden. You will be able to add a static image as the background to show on mobile when using container background video support. Due to the inability for container background video to autoplay while on mobile, this will create a more fluid experience for all your mobile visitors.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"844\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-21-1024x844.png\" alt=\"\" class=\"wp-image-8082\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-21-1024x844.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-21-300x247.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-21-768x633.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-21.png 1312w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Page Background<\/h4>\n\n\n\n<p class=\"\">This allows the video to fill the background of the entire page, with further options to set the video on autoplay or looping.<\/p>\n\n\n\n<p class=\"\">Page background support for video will appear within desktop views. <strong>However<\/strong>, within mobile, page background video will be hidden. You will be able to add a static image as the background to show on mobile when using full page background video support. Due to the inability for page background video to autoplay while on mobile, this will create a more fluid experience for all your mobile visitors.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"608\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-20-1024x608.png\" alt=\"\" class=\"wp-image-8080\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-20-1024x608.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-20-300x178.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-20-768x456.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-20-1536x912.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-20.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Note about Autoplay<\/h4>\n\n\n\n<p class=\"\">After recent updates in Chrome and IOS\/Safari, some browsers restrictions may occur for autoplay of videos, especially videos with sound.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"710\" height=\"284\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-18.png\" alt=\"\" class=\"wp-image-8076\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-18.png 710w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-18-300x120.png 300w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"714\" height=\"260\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-19.png\" alt=\"\" class=\"wp-image-8078\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-19.png 714w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-19-300x109.png 300w\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" \/><\/figure>\n\n\n\n<p class=\"\">If the video is not playing because it has audio, you can choose to use a version without sound.<\/p>\n\n\n\n<p class=\"\"><strong>*NOTE:<\/strong> There may also be privacy restrictions on the video itself, which in this case requires the owner to change their settings directly on YouTube, Vimeo, and others.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"\">If you have any questions, please contact us on <a href=\"mailto:help@ioninteractive.com\" rel=\"noopener noreferrer nofollow\">help@ioninteractive.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Let\u2019s get started To begin, you will want to drag the video icon from the Interactive category onto your page where you would like to display your video. Next, you will want to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5628,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[9,1060],"tags":[2268],"class_list":["post-2714","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-interactive-components","category-video-component","tag-video"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=2714"}],"version-history":[{"count":3,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2714\/revisions"}],"predecessor-version":[{"id":8085,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2714\/revisions\/8085"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5628"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}