fbpx
Get +30% off for a limited time with
BM30OFF
Get +30% off for a limited time with
BM30OFF
Copy Bricks structure
{"content":[{"id":"gphqga","name":"section","parent":0,"children":["njbqdu"],"settings":{"_height":"100vh","_alignSelf":"center","_justifyContent":"center","_alignItems":"center","_background":{"color":{"hex":"#000000"}},"_overflow":"hidden"}},{"id":"njbqdu","name":"container","parent":"gphqga","children":["iywuaz","bqxnbw","lbwgmm","gpjeoc"],"settings":{"_alignItems":"center","_alignSelf":"center","_justifyContent":"center"}},{"id":"iywuaz","name":"code","parent":"njbqdu","children":[],"settings":{"code":"\n PURPLE,\n\n \n GREENAND \n\n\n\tGRADIENTS.\n","executeCode":true,"_cssCustom":".video-span {\n\tdisplay: inline-block;\n position: relative;\n height: 0.8em;\n width: 2em;\n margin:0 0.2em;\n border-radius: 50px;\n overflow: hidden;\n}\n\n.video-trigger { \n position: relative;\n}\n ","_typography":{"font-size":"10rem","font-family":"custom_font_882","line-height":"1","color":{"raw":"#e8e8cf"},"text-align":"center"},"_typography:mobile_portrait":{"font-size":"5rem"},"_typography:mobile_landscape":{"font-size":"6rem"},"_typography:tablet_portrait":{"font-size":"8rem"},"_width":"80%"}},{"id":"bqxnbw","name":"div","parent":"njbqdu","children":["wzwozm"],"settings":{"_cssGlobalClasses":["fabdzp"],"tag":"div"}},{"id":"wzwozm","name":"video","parent":"bqxnbw","children":[],"settings":{"videoType":"file","youTubeId":"5DGo0AYOJ7s","youtubeControls":true,"youtubeShowinfo":true,"vimeoByline":true,"vimeoTitle":true,"vimeoPortrait":true,"fileUrl":"https://bricksmotion.co/wp-content/uploads/pexels-rostislav-uzunov-10613972-960x540-24fps.mp4","fileAutoplay":true,"fileMute":true,"fileLoop":true,"_cssGlobalClasses":["ihrzef"]}},{"id":"lbwgmm","name":"div","parent":"njbqdu","children":["gbtaak"],"settings":{"_cssGlobalClasses":["fabdzp"],"tag":"div"}},{"id":"gbtaak","name":"video","parent":"lbwgmm","children":[],"settings":{"videoType":"file","youTubeId":"5DGo0AYOJ7s","youtubeControls":true,"youtubeShowinfo":true,"vimeoByline":true,"vimeoTitle":true,"vimeoPortrait":true,"fileUrl":"https://bricksmotion.co/wp-content/uploads/pexels-ruvim-miksanskiy-1448735-960x506-24fps.mp4","fileAutoplay":true,"fileMute":true,"fileLoop":true,"_cssGlobalClasses":["ihrzef"]}},{"id":"gpjeoc","name":"div","parent":"njbqdu","children":["iiklvd"],"settings":{"_cssGlobalClasses":["fabdzp"],"tag":"div"}},{"id":"iiklvd","name":"video","parent":"gpjeoc","children":[],"settings":{"videoType":"file","youTubeId":"5DGo0AYOJ7s","youtubeControls":true,"youtubeShowinfo":true,"vimeoByline":true,"vimeoTitle":true,"vimeoPortrait":true,"fileUrl":"https://bricksmotion.co/wp-content/uploads/pexels-weldi-studio-design-8675542-960x540-30fps.mp4","fileAutoplay":true,"fileMute":true,"fileLoop":true,"_cssGlobalClasses":["ihrzef"]}}],"source":"bricksCopiedElements","sourceUrl":"https://bricksmotion.co","version":"1.8","globalClasses":[{"id":"fabdzp","name":"video-wrapper","settings":[]},{"id":"ihrzef","name":"span_video","settings":{"_zIndex":"0","_height":"0.8em","_width":"2em","_background":{"color":{"hex":"#ff0000","rgb":"rgba(255, 0, 0, 0)","hsl":"hsla(0, 100%, 50%, 0)"}},"_cssCustom":"video {\n object-fit: cover;\n}"}}],"globalElements":[]}
{"content":[{"id":"gphqga","name":"section","parent":0,"children":["njbqdu"],"settings":{"_height":"100vh","_alignSelf":"center","_justifyContent":"center","_alignItems":"center","_background":{"color":{"hex":"#000000"}},"_overflow":"hidden"}},{"id":"njbqdu","name":"container","parent":"gphqga","children":["iywuaz","bqxnbw","lbwgmm","gpjeoc"],"settings":{"_alignItems":"center","_alignSelf":"center","_justifyContent":"center"}},{"id":"iywuaz","name":"code","parent":"njbqdu","children":[],"settings":{"code":"\n PURPLE,\n\n \n GREENAND \n\n\n\tGRADIENTS.\n","executeCode":true,"_cssCustom":".video-span {\n\tdisplay: inline-block;\n position: relative;\n height: 0.8em;\n width: 2em;\n margin:0 0.2em;\n border-radius: 50px;\n overflow: hidden;\n}\n\n.video-trigger { \n position: relative;\n}\n ","_typography":{"font-size":"10rem","font-family":"custom_font_882","line-height":"1","color":{"raw":"#e8e8cf"},"text-align":"center"},"_typography:mobile_portrait":{"font-size":"5rem"},"_typography:mobile_landscape":{"font-size":"6rem"},"_typography:tablet_portrait":{"font-size":"8rem"},"_width":"80%"}},{"id":"bqxnbw","name":"div","parent":"njbqdu","children":["wzwozm"],"settings":{"_cssGlobalClasses":["fabdzp"],"tag":"div"}},{"id":"wzwozm","name":"video","parent":"bqxnbw","children":[],"settings":{"videoType":"file","youTubeId":"5DGo0AYOJ7s","youtubeControls":true,"youtubeShowinfo":true,"vimeoByline":true,"vimeoTitle":true,"vimeoPortrait":true,"fileUrl":"https://bricksmotion.co/wp-content/uploads/pexels-rostislav-uzunov-10613972-960x540-24fps.mp4","fileAutoplay":true,"fileMute":true,"fileLoop":true,"_cssGlobalClasses":["ihrzef"]}},{"id":"lbwgmm","name":"div","parent":"njbqdu","children":["gbtaak"],"settings":{"_cssGlobalClasses":["fabdzp"],"tag":"div"}},{"id":"gbtaak","name":"video","parent":"lbwgmm","children":[],"settings":{"videoType":"file","youTubeId":"5DGo0AYOJ7s","youtubeControls":true,"youtubeShowinfo":true,"vimeoByline":true,"vimeoTitle":true,"vimeoPortrait":true,"fileUrl":"https://bricksmotion.co/wp-content/uploads/pexels-ruvim-miksanskiy-1448735-960x506-24fps.mp4","fileAutoplay":true,"fileMute":true,"fileLoop":true,"_cssGlobalClasses":["ihrzef"]}},{"id":"gpjeoc","name":"div","parent":"njbqdu","children":["iiklvd"],"settings":{"_cssGlobalClasses":["fabdzp"],"tag":"div"}},{"id":"iiklvd","name":"video","parent":"gpjeoc","children":[],"settings":{"videoType":"file","youTubeId":"5DGo0AYOJ7s","youtubeControls":true,"youtubeShowinfo":true,"vimeoByline":true,"vimeoTitle":true,"vimeoPortrait":true,"fileUrl":"https://bricksmotion.co/wp-content/uploads/pexels-weldi-studio-design-8675542-960x540-30fps.mp4","fileAutoplay":true,"fileMute":true,"fileLoop":true,"_cssGlobalClasses":["ihrzef"]}}],"source":"bricksCopiedElements","sourceUrl":"https://bricksmotion.co","version":"1.8","globalClasses":[{"id":"fabdzp","name":"video-wrapper","settings":[]},{"id":"ihrzef","name":"span_video","settings":{"_zIndex":"0","_height":"0.8em","_width":"2em","_background":{"color":{"hex":"#ff0000","rgb":"rgba(255, 0, 0, 0)","hsl":"hsla(0, 100%, 50%, 0)"}},"_cssCustom":"video {\n object-fit: cover;\n}"}}],"globalElements":[]}

Structure & Styling

Make sure to load jQuery. You can insert it here: Bricks -> Settings -> Custom Code -> Header Scripts

<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>

More Tutorials