Merge pull request #235 from vtex-apps/feature/video-block-example

Adding video block example to about us page

Author: Ícaro Azevedo

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Example of [vtex.store-video](https://github.com/vtex-apps/store-video) usage.
 
 ## [4.1.0] - 2020-11-16
 ### Changed

manifest.json

@@ -52,6 +52,7 @@
     "vtex.store-icons": "0.x",
     "vtex.modal-layout": "0.x",
     "vtex.store-link": "0.x",
+    "vtex.store-video": "1.x",
     "vtex.product-gifts": "0.x",
     "vtex.product-price": "1.x",
     "vtex.disclosure-layout": "1.x",

store/blocks/about-us.json

@@ -1,7 +1,8 @@
 {
   "store.custom#about-us": {
     "blocks": [
-      "flex-layout.row#about-us"
+      "flex-layout.row#about-us",
+      "video#about-us"
     ]
   },
 
@@ -39,7 +40,13 @@
       "blockClass": "storePrint"
     }
   },
-
+  "video#about-us": {
+    "props": {
+      "src": "https://www.youtube.com/embed/JgkrlaF52WQ",
+      "width": "100%",
+      "height": "100%"
+    }
+  },
   "rich-text#about-us": {
     "props": {
       "text": "**Optimized store framework** \n Free your front-end with our React + Node store framework. Improve usability and SEO, while driving more conversion with modular components, single page applications, and a ready-for-PWA structure. \n **Multi-currency and language** \n Go international with multiple storefronts to support different languages and easily manage local currencies and payment conditions. \n **Serverless development platform** \n Reduce loading time, improve usability, and make the best out of SEO. Developing scalable components with a comprehensive, easy-to-use toolset, you can build stores faster than ever.",

styles/css/vtex.store-video.css

@@ -0,0 +1,11 @@
+.videoContainer {
+  width: 100%;
+  height: 300px;
+  margin-top: 2%;
+}
+
+@media only screen and (min-width: 640px) {
+  .videoContainer {
+    height: 700px;
+  }
+}