Video block

<!-- wp:paragraph -->
<p>This block is similar to Core video block but it has some unique features.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>You can enable overlay with customizable pulse icon + custom preloader image (or leave blank and plugin will generate image automatically)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>You can enable lighbox</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>If you have enabled lightbox, then, plugin will use lazy load on video and this will give you full web vitals score. In scenarios when you use core video block of Wordpress and youtube video, you can find very low web vitals. </li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>You can add custom start and end points</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>You can customize size of video</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>You can add custom shadows, borders, etc</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>You can enable video SEO schema</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-1af3ff7d-9f37"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-1af3ff7d-9f37" id="gspb_infoBox-id-gsbp-1af3ff7d-9f37"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>This block has video SEO schema. Check <a href="/tag/seo-schema/">other blocks with SEO schema</a></p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-61a29ede-c66f","type":"blue"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-61a29ede-c66f" id="gspb_infoBox-id-gsbp-61a29ede-c66f"><div class="gs-box blue_type "><div class="gs-box-icon"></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>This block has also Dynamic Field feature to get values from custom fields (requires to have Query addon)</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:greenshift-blocks/video {"id":"gsbp-b48e3510-9d59","src":"https://www.youtube.com/watch?v=00ebtAX-a34","provider":"youtube","poster":"https://i.ytimg.com/vi/00ebtAX-a34/maxresdefault.jpg","isOverlay":true,"overlayIcon":true,"overlayLightbox":true,"isSchema":true,"schemaTitle":"How to add shadows in Gutenberg editor","schemaDescription":"How to add design options to any block Wordpress","postDate":"2022-05-05T01:23:08+00:00","bgColor":"#251259","bgGradient":null,"shadow":{"hoffset":0,"voffset":32,"blur":48,"spread":0,"color":"#2b144642","position":null}} -->
<div class="wp-block-greenshift-blocks-video gs-video youtube gspb_video-id-gsbp-b48e3510-9d59" id="gs-video-gsbp-b48e3510-9d59"><div class="gs-video-wrapper" itemscope itemprop="VideoObject" itemtype="https://schema.org/VideoObject"><iframe class="gs-video-element" data-src="https://www.youtube.com/watch?v=00ebtAX-a34" data-provider="youtube" data-autoplay="true" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-overlay="true" data-lightbox="true" data-modestbranding="false" data-suggested="true" frameborder="0" allowfullscreen></iframe><div class="gs-video-overlay" style="background-image:url(https://i.ytimg.com/vi/00ebtAX-a34/maxresdefault.jpg)" data-type="youtube" data-lightbox="true"><div class="gs-play-icon" style="background-color:#cc0000"><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0"></div><span></span><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0;animation-delay:0.5s"></div></div><div class="gs-overlay-color" style="background-color:#251259;background-image:;opacity:0.5"></div></div><meta content="How to add shadows in Gutenberg editor" itemprop="name"/><meta content="How to add design options to any block Wordpress" itemprop="description"/><meta content="https://i.ytimg.com/vi/00ebtAX-a34/maxresdefault.jpg" itemprop="thumbnailURL"/><meta content="https://www.youtube.com/watch?v=00ebtAX-a34" itemprop="embedUrl"/><meta content="2022-05-05T01:23:08+00:00" itemprop="uploadDate"/></div></div>
<!-- /wp:greenshift-blocks/video -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="dynamic-lightbox">Dynamic Lightbox</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>if you want to open lightbox with video on some link or button, you don't need to use VideoBlock. You can use <a href="https://greenshiftwp.com/documentation/greenshift-extra/interaction-panels/" data-type="documentation" data-id="3662">Interaction Layers</a> Lightbox action that supports youtube, vimeo and video mp4 links. For links, you can use dynamic data.</p>
<!-- /wp:paragraph -->

<!-- wp:video {"id":5296} -->
<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2022/05/customlightbox.mp4"></video></figure>
<!-- /wp:video -->