feat: added textblock with local video url (#1505)

README.md

@@ -1648,6 +1648,27 @@ world-class creative assets with the Adobe Stock API, or sign up for early infor
 
 ```
 
+**With a local video**
+
+![text block with a local video](docs/images/textblockwithvideo.png)
+
+```
+
+import video1 from '../videos/localVideo.mp4'
+
+<TextBlock slots="icons,heading,text,buttons" videoUrl={video1} variantsTypePrimary='accent' variantStyleFill = "fill" homeZigZag position="left"  />
+
+![Adobe Express](./images/Adobe-Express-logo-RGB.png)
+
+### One-click edits with Adobe Express quick actions 
+
+Quick actions turn multistep design workflows into just a few clicks, making removing backgrounds, resizing images and merging videos faster than ever – all powered by Adobe Photoshop and Adobe Premiere Pro. Enable these powerful shortcuts in any website in minutes.
+
+- [Learn more](https://adobe.io)
+- [Try it ](https://adobe.io)
+
+```
+
 Use `slots` to identify the markdown content:
 
 - `heading` (required)
@@ -1666,6 +1687,10 @@ Use `isCentered` to center the text.
 
 Use `className` to customize the component **at your own risk.**
 
+Use `videoUrl` to add the local video to the block
+
+Use `position` to position the video values are `left`, `right`. The preset variant is left.
+
 ### Tabs Block
 
 Tabs block is a custom block component that allows for tabbed content that can be displayed either vertically or horizontally.

example/src/pages/index.md

@@ -28,6 +28,7 @@ import AddAnalyticsXamarin from './add-analytics/xamarin.md'
 import TeaserComp from './teaser/teasercomp.md'
 import VideoCarouselComp from './videoCarousel/videoCarousel.md'
 import blackbg from "./teaser/black_power.jpg"
+import TextBlockComp from "./textblock/textblock.md"
 
 <Hero slots="image, heading, text" background="rgb(64, 34, 138)" hideBreadcrumbNav={false}/>
 
@@ -158,6 +159,8 @@ Accordion item is to expand and collapse the content by clicking the icon. By de
 
 <VideoCarouselComp />
 
+<TextBlockComp />
+
 ## Inline Alerts {#Categories}
 
 These are the five types of inline alerts you can use.

example/src/pages/textblock/textblock.md

@@ -0,0 +1,18 @@
+
+import video1 from "./TextBlockWithLocalVideo.mp4"
+
+## TextBlock with video
+
+Text Blocks are used for layout compositions. They are areas for long blocks of text and explaining features etc. for Product/Platform pages. They are coupled with images or videos.
+
+<TextBlock slots="icons,heading,text,buttons" videoUrl={video1} variantsTypePrimary='accent' variantStyleFill = "fill" homeZigZag position="left" />
+
+![Adobe Express](./Adobe-Express-logo-RGB.png)
+
+### One-click edits with Adobe Express quick actions 
+
+Quick actions turn multistep design workflows into just a few clicks, making removing backgrounds, resizing images and merging videos faster than ever – all powered by Adobe Photoshop and Adobe Premiere Pro. Enable these powerful shortcuts in any website in minutes.
+
+- [Learn more](https://adobe.io)
+- [Try it ](https://adobe.io)
+