{"id":8641,"date":"2023-05-18T15:27:50","date_gmt":"2023-05-18T12:27:50","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=7128"},"modified":"2026-09-04T12:43:19","modified_gmt":"2026-09-04T09:43:19","slug":"featured-videos","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/modules\/featured-videos\/","title":{"rendered":"Featured Videos"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Featured Videos<\/strong> lets you replace a standard featured image with a video on supported post types and WooCommerce products. The feature is available with Blocksy Pro and works anywhere Blocksy supports video thumbnails, including archive cards, single content and product galleries.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can use locally hosted videos from the WordPress Media Library or embed videos from supported external services such as YouTube and Vimeo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quick Look<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2023\/05\/Screen-Recording-2023-05-18-at-15.58.18.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Featured Videos in action.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Supported Video Sources<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Featured Videos can use several video sources depending on how you prefer to host your content:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Media Library<\/strong> &#8211; select an existing locally hosted video or upload a new one directly to WordPress.<\/li>\n\n\n\n<li><strong>YouTube<\/strong> &#8211; provide a YouTube video URL and let Blocksy embed the remote video.<\/li>\n\n\n\n<li><strong>Vimeo<\/strong> &#8211; provide a Vimeo video URL in the same way.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a Featured Video to a Post<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Featured Videos integrate directly with WordPress&#8217; existing featured image interface.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the post or other supported content type in the WordPress editor.<\/li>\n\n\n\n<li>Assign a <strong>Featured Image<\/strong> if one has not already been selected.<\/li>\n\n\n\n<li>Open the featured image controls and select the <strong>video playback<\/strong> icon.<\/li>\n\n\n\n<li>Choose a locally hosted video or provide a supported external video source.<\/li>\n\n\n\n<li>Configure the playback options and save your changes.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2023\/05\/Screen-Recording-2025-05-30-at-15.35.47.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Adding a Featured Video to a post.<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-color has-palette-color-1-background-color has-text-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"is-style-info coblocks-alert-paragraph wp-block-paragraph\"><strong>Featured Videos are associated with the image<\/strong><br>The video configuration is stored against the image attachment itself rather than exclusively against an individual post. If the same image is reused as the featured image for another post, page or supported post type, its Featured Video configuration will be reused there as well.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a Featured Video to a Product<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WooCommerce products use the same Featured Video workflow. You can attach a video to the main product image and configure the same playback options available for other supported post types.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Blocksy also supports Featured Videos on individual images inside the WooCommerce product gallery. This lets you combine regular product images and videos within the same gallery.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2023\/05\/Screen-Recording-2025-05-30-at-15.38.28.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Adding a Featured Video to a WooCommerce product.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Granular Controls<\/h2>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6abf34e5c3ba1&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6abf34e5c3ba1\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2023\/05\/Screenshot-2025-05-30-at-15.40.16.png\" alt=\"Featured Video playback and presentation options in Blocksy\" class=\"wp-image-13339\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Featured Video playback and presentation options.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Playback Trigger<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Playback Trigger<\/strong> determines when the video starts playing:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Autoplay<\/strong> &#8211; starts playback automatically when the video is loaded.<\/li>\n\n\n\n<li><strong>Hover<\/strong> &#8211; starts playback when the visitor moves the pointer over the video thumbnail.<\/li>\n\n\n\n<li><strong>Click<\/strong> &#8211; waits for the visitor to intentionally start the video.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Loop Video<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Enable <strong>Loop Video<\/strong> to automatically restart playback when the video reaches the end.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Simplified Player<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Simplified Player<\/strong> replaces the video&#8217;s standard player interface with Blocksy&#8217;s cleaner play and pause controls. This is useful when the video acts primarily as a visual thumbnail rather than as traditional long-form video content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Video Size<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When the <strong>Simplified Player<\/strong> is active, the <strong>Video Size<\/strong> option controls how a video with a different aspect ratio fits inside its image container.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Contain<\/strong> &#8211; keeps the entire video visible inside the available area. Empty space may remain around the video when its aspect ratio differs from the container.<\/li>\n\n\n\n<li><strong>Cover<\/strong> &#8211; fills the complete container by cropping parts of the video when necessary. This avoids empty space but may hide content near the video&#8217;s edges.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These playback and sizing options are available for locally hosted videos as well as supported YouTube and Vimeo embeds.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Locally Hosted Video Recommendations<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When serving videos directly from your own website, use broadly supported formats and keep file sizes appropriate for web delivery.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Container<\/strong> &#8211; MP4 provides broad compatibility across modern browsers and devices.<\/li>\n\n\n\n<li><strong>Video Codec<\/strong> &#8211; H.264 is a widely supported choice for video encoded inside an MP4 container.<\/li>\n\n\n\n<li><strong>Audio Codec<\/strong> &#8211; AAC provides broad compatibility when the video contains an audio track.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Resolution &amp; File Size<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Higher resolutions and bitrates generally produce better image quality but also increase the amount of data visitors need to download. Choose a resolution and compression level appropriate for the size at which the video will actually be displayed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Keeping locally hosted videos reasonably small reduces bandwidth usage and can improve initial loading and playback behaviour, particularly for visitors on slower connections or mobile networks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Featured Videos lets you replace a standard featured image with a video on supported post types and WooCommerce products. The feature is available with Blocksy Pro and works anywhere Blocksy supports video thumbnails, including archive cards, single content and product galleries. You can use locally hosted videos from the WordPress Media Library or embed videos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[120],"class_list":["post-8641","documentation","type-documentation","status-publish","hentry","doc_categories-modules"],"blocksy_meta":{"docs_item_badge":"PRO","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/8641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=8641"}],"version-history":[{"count":7,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/8641\/revisions"}],"predecessor-version":[{"id":15150,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/8641\/revisions\/15150"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=8641"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=8641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}