I am trying to mask a video using an SVG path. I have defined the mask in defs with an id of #mask. I am referencing this mask in the video tag, but it isn't working.
video {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
mask: url(#mask);
clip-path: url(#mask);
}<figure>
<svg viewBox="0 0 1000 795" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask">
<path d="m186.25954 642.14758c15.684481 0 32.158648 3.734007 48.960171 8.911832l2.193321.683368c1.097551.34559 2.196409.696897 3.296446 1.053287l2.201606.719367c.367184.120961.734489.24244 1.10191.364413l2.205894.737578 2.208466.748308 2.210811.757907 2.212928.766378c.368985.128372.738049.257051 1.107187.386012l26.64008 9.44782 1.127628.392224 2.254393.778607 2.253042.769833 2.251452.759875c.750192.2515 1.500079.501142 2.249622.74873l2.247555.736402c2.995253.973123 5.984354 1.91021 8.964749 2.798622l2.233624.656984c15.251401 4.424329 30.257401 7.487173 44.674535 7.487173 30.187786 0 45.682572-3.956808 60.065102-12.558236l1.104384-.670821c1.470197-.906674 2.932356-1.862391 4.401131-2.867895l1.103051-.763474c.184125-.128806.36841-.258392.552885-.38876l1.109347-.79161 1.115262-.810453 1.122551-.829367 1.131213-.848349c.189334-.142977.379085-.286748.569284-.431315l16.89222-13.43424.90991-.72889-32.84368 37.22997-2.008608 2.262743-3.952865 4.441325c-63.223568 70.897863-93.81836 98.086712-150.507827 98.086712-22.177964 0-43.839714-5.783073-65.023216-13.095637l-2.267833-.789147c-.377667-.132436-.755183-.265311-1.132547-.3986l-2.262361-.804526c-.376758-.134853-.753363-.270073-1.129818-.405635l-2.256915-.817288-2.253296-.824343c-.375248-.137914-.750346-.276073-1.125294-.414454l-2.836136-.998288-2.796112-.978121-2.756088-.957954-2.716064-.937785-3.999053-1.368865-2.616005-.887368-2.575981-.8672-2.535958-.847032-2.495934-.826865-2.45591-.806698-3.608821-1.172232c-.395977-.127727-.790287-.254614-1.182928-.380661l-2.33584-.746195-2.295815-.726028-2.255791-.70586-3.308643-1.020977-2.155733-.655442-2.115708-.635274-2.075685-.615107-2.035661-.594939-1.995638-.574773-1.955613-.554604-1.91559-.534437c-.31593-.087393-.630192-.173944-.942787-.259656l-1.855554-.504186c-.305924-.08235-.61018-.163861-.912768-.24453l-1.795519-.473935-1.755495-.453768c-.289248-.073947-.576827-.147054-.862739-.21932l-1.69546-.423517-1.655436-.403348c-.27257-.065545-.543473-.130249-.812709-.194112l-1.5954-.373098-1.5553768-.35293-1.515353-.332763c-.7476706-.161339-1.4803323-.315116-2.197985-.46133l-1.4152938-.282344c-.232547-.045377-.4634263-.089913-.692638-.133609l-1.3552582-.252093-1.3152345-.231926c-.2158705-.036974-.4300733-.073107-.6426084-.1084l-1.255199-.201674c-.411729-.063864-.8167875-.124366-1.2151753-.181507l-1.1751516-.16134c-2.8878495-.378139-5.4004769-.567209-7.5378824-.567209-24.7019095 0-39.9955396 5.79117-56.09557 17.622721l-1.1379452.845205c-.3798502.285081-.7602799.573509-1.1414222.865288l-1.1456977.885392c-.3827005.298484-.7662466.600321-1.1507715.905516l-1.1566437.925659c-.1933077.155956-.3868933.312752-.5807735.470389l-1.166949.955909-1.1748172.976101-1.46244 1.23295-.73663.62803-1.8589262 1.603851-1.8860138 1.652139-1.53029 1.35653-1.55101 1.38752-1.57324 1.41854-2.40481 2.18606-1.63536 1.49626c93.89313-106.89733 133.58779-141.25719 186.25954-141.25719z" />
<path d="m229.00763 155.76469-7.63792 8.88149c-11.73376 14.78942-16.0262 27.03633-16.0262 43.04008 0 24.804153 9.076575 48.834136 21.718428 72.709595l1.158928 2.170087c.38948.723233.782082 1.44634 1.17765 2.16934l1.195454 2.168696c.8027 1.445605 1.616654 2.890849 2.440637 4.335871l1.243342 2.167383c.416853.722416.836059 1.444795 1.257465 2.167152l1.270667 2.167025 1.282949 2.167001c.214797.361171.430068.722345.645793 1.083524l1.299647 2.16716 1.309629 2.167394 1.31869 2.167733 1.326831 2.168175 1.334053 2.16872 2.686089 4.339489 10.996368 17.637505 2.071137 3.344474 1.999135 3.248295 1.325848 2.167973 1.319277 2.170045 1.311808 2.172218 1.303445 2.174491c.216495.36261.432603.725319.648307 1.088129l1.28922 2.17809 1.278617 2.180616 1.267119 2.183241c.210179.364098.419841.728309.628968 1.092637l1.248191 2.187368c16.346038 28.81908 29.119588 58.386476 29.119588 89.736683 0 61.08419-42.74809 116.05997-152.67175 193.17876 26.71756-20.61591 44.27481-42.75893 44.27481-75.59169 0-29.714407-9.877977-56.018733-22.948511-81.250513l-1.096458-2.100215c-.367854-.699278-.738028-1.397778-1.110379-2.095551l-1.12344-2.091187-1.13564-2.087122c-.380485-.695064-.76286-1.389501-1.146982-2.08336l-1.157464-2.079898c-.193736-.346377-.387873-.692623-.582393-1.038744l-1.171574-2.075267-1.179907-2.072557-1.187378-2.070146-1.193992-2.068036-1.801505-3.098757-2.417127-4.127097-6.46343-10.96806-2.57812-4.39136-1.76975-3.033775-1.174109-2.02476-1.168589-2.026885-1.162264-2.029289-1.155132-2.031978-1.147195-2.034946-1.138451-2.038198c-.188968-.339986-.377539-.680119-.565694-1.020406l-1.123824-2.043602c-.37286-.681845-.743926-1.364349-1.113065-2.047559l-1.101501-2.051796-1.089129-2.056315-1.075952-2.061116-1.06197-2.066199c-.527355-1.034417-1.049164-2.070846-1.564973-3.109446l-1.023486-2.080139c-11.336604-23.261587-19.530156-47.658394-19.530156-74.956311 0-52.68511 35.1145-106.13378 119.84732-177.14416z" />
<path d="m800 1.5271c78.62595 0 123.66412 38.17763 123.66412 165.69088l-.009 4.04965c-2.66458 323.78634-3.98573 485.72835-3.96344 485.82602.03343.1465-.03344 37.92335 49.77397 36.21194 9.28857-.31916 16.06749-2.51301 24.40936-7.13126l1.17454-.65802c.19759-.11194.39612-.225.59566-.33919l1.20961-.69855c.20374-.11866.40859-.23843.61458-.35931l1.25023-.73853 1.28037-.76487-1.15805 1.06668-1.95082 1.81334-2.9772 2.79193-1.63997 1.546-5.47308 5.18319-22.9137 21.79369-77.81264 70.45918c-5.80455 4.84176-11.85764 7.58819-22.71576 7.58819-12.9771 0-34.35115-7.63552-61.0687-35.88696-.91603-1.0308-1.80344-2.05205-2.66279-3.06586l-1.01779-1.21313c-15.4008-18.55064-21.38136-34.86518-21.5082-62.02415l-.00206-.88947 7.63358-459.65856c0-98.49826-20.61068-125.98614-95.41984-125.98614-39.32825 0-65.08825 16.80304-80.84651 30.78833l-3.88147 3.56588 11.51818-11.87195 26.09386-26.81337c58.71562-59.79359 103.2954-99.3183 155.88292-100.25843z" />
<path d="m597.69051 159.60225-.72142 52.82745-1.24208 70.3262-.10591 5.87529c30.88599 5.98872 51.72104 8.98308 62.50517 8.98308 24.82476 0 54.56559-7.83295 89.22249-23.49885.30147-.16506.60494-.33105.91048-.49799l-21.0731 16.32867-26.07023 20.02094c-43.9909 33.31576-72.08851 51.08728-106.93278 57.66328l-1.50981 82.08231 16.37688 3.65541c16.76474 3.49226 33.2739 6.00305 49.07607 6.00305 24.82476 0 54.56559-7.83294 89.22249-23.49884.30147-.16506.60494-.33105.91048-.49799l-23.52869 18.22929-29.73067 22.72748c-41.74421 31.26197-69.21374 47.75536-103.79682 53.58848-1.26006 41.53366-1.62581 62.30049-1.09726 62.30049 0 42.65165 5.38492 68.89774 16.15476 78.73829 9.23165 11.34039 23.19746 23.11085 42.5944 23.11085 20.61069 0 48.85496-10.68973 74.0458-29.01499l-1.91771 1.78266-2.17057 2.03871-4.13852 3.92317-4.72914 4.5153-102.31123 94.6375c-18.32061 14.50749-35.87786 22.14302-58.01527 22.14302-12.9771 0-31.29771-7.63553-58.01527-35.88696-18.1374-20.40976-29.54129-43.81295-29.76756-73.17306l-.00343-.89153 2.81351-168.00291c-39.21063-8.63244-64.59542-12.94866-76.15438-12.94866-17.23221 0-42.36438 7.68201-75.39652 23.04603l27.84123-21.89666c56.16476-42.16437 90.60018-62.45303 125.06721-69.31021l1.33913-79.95285-25.88051-6.42773c-17.99504-4.14746-35.64323-7.2154-52.97054-7.2154-18.18955 0-44.66929 8.52061-79.43923 25.56184l20.0785-15.47465c64.82862-49.45913 101.84825-72.02225 139.59092-78.76106l.74427-44.45853c0-89.33563-31.29771-123.69549-117.55725-123.69549-43.05344 0-82.73435 21.5896-112.06838 42.57199-3.2623 2.37456-5.09193 3.70947-5.48887 4.00471l4.98045-4.97489c81.15298-80.94339 152.77527-146.20849 214.86687-146.20849 77.8397 0 142.21237 35.17281 143.49204 159.60225z" />
</mask>
</defs>
</svg>
<div>
<video playsinline autoplay muted loop>
<source src="https://media.gettyimages.com/videos/aerial-view-of-clear-turquoise-sea-and-waves-video-id1194337503" type="video/mp4">
</video>
</div>
</figure>I have created a Codepen example here: https://codepen.io/henken/pen/rNpebvZ
CodePudding user response：
When using a mask you need to specify the transparent areas. So, the <path>s need some kind of fill. That can be a solid color, a gradient etc. Here I styles the paths with a white color.
You also need to make sure that the mask fits in size with the content that is masked.
path {
fill: white;
}
video {
mask: url(#mask);
}<figure>
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask">
<path d="m186.25954 642.14758c15.684481 0 32.158648 3.734007 48.960171 8.911832l2.193321.683368c1.097551.34559 2.196409.696897 3.296446 1.053287l2.201606.719367c.367184.120961.734489.24244 1.10191.364413l2.205894.737578 2.208466.748308 2.210811.757907 2.212928.766378c.368985.128372.738049.257051 1.107187.386012l26.64008 9.44782 1.127628.392224 2.254393.778607 2.253042.769833 2.251452.759875c.750192.2515 1.500079.501142 2.249622.74873l2.247555.736402c2.995253.973123 5.984354 1.91021 8.964749 2.798622l2.233624.656984c15.251401 4.424329 30.257401 7.487173 44.674535 7.487173 30.187786 0 45.682572-3.956808 60.065102-12.558236l1.104384-.670821c1.470197-.906674 2.932356-1.862391 4.401131-2.867895l1.103051-.763474c.184125-.128806.36841-.258392.552885-.38876l1.109347-.79161 1.115262-.810453 1.122551-.829367 1.131213-.848349c.189334-.142977.379085-.286748.569284-.431315l16.89222-13.43424.90991-.72889-32.84368 37.22997-2.008608 2.262743-3.952865 4.441325c-63.223568 70.897863-93.81836 98.086712-150.507827 98.086712-22.177964 0-43.839714-5.783073-65.023216-13.095637l-2.267833-.789147c-.377667-.132436-.755183-.265311-1.132547-.3986l-2.262361-.804526c-.376758-.134853-.753363-.270073-1.129818-.405635l-2.256915-.817288-2.253296-.824343c-.375248-.137914-.750346-.276073-1.125294-.414454l-2.836136-.998288-2.796112-.978121-2.756088-.957954-2.716064-.937785-3.999053-1.368865-2.616005-.887368-2.575981-.8672-2.535958-.847032-2.495934-.826865-2.45591-.806698-3.608821-1.172232c-.395977-.127727-.790287-.254614-1.182928-.380661l-2.33584-.746195-2.295815-.726028-2.255791-.70586-3.308643-1.020977-2.155733-.655442-2.115708-.635274-2.075685-.615107-2.035661-.594939-1.995638-.574773-1.955613-.554604-1.91559-.534437c-.31593-.087393-.630192-.173944-.942787-.259656l-1.855554-.504186c-.305924-.08235-.61018-.163861-.912768-.24453l-1.795519-.473935-1.755495-.453768c-.289248-.073947-.576827-.147054-.862739-.21932l-1.69546-.423517-1.655436-.403348c-.27257-.065545-.543473-.130249-.812709-.194112l-1.5954-.373098-1.5553768-.35293-1.515353-.332763c-.7476706-.161339-1.4803323-.315116-2.197985-.46133l-1.4152938-.282344c-.232547-.045377-.4634263-.089913-.692638-.133609l-1.3552582-.252093-1.3152345-.231926c-.2158705-.036974-.4300733-.073107-.6426084-.1084l-1.255199-.201674c-.411729-.063864-.8167875-.124366-1.2151753-.181507l-1.1751516-.16134c-2.8878495-.378139-5.4004769-.567209-7.5378824-.567209-24.7019095 0-39.9955396 5.79117-56.09557 17.622721l-1.1379452.845205c-.3798502.285081-.7602799.573509-1.1414222.865288l-1.1456977.885392c-.3827005.298484-.7662466.600321-1.1507715.905516l-1.1566437.925659c-.1933077.155956-.3868933.312752-.5807735.470389l-1.166949.955909-1.1748172.976101-1.46244 1.23295-.73663.62803-1.8589262 1.603851-1.8860138 1.652139-1.53029 1.35653-1.55101 1.38752-1.57324 1.41854-2.40481 2.18606-1.63536 1.49626c93.89313-106.89733 133.58779-141.25719 186.25954-141.25719z" />
<path d="m229.00763 155.76469-7.63792 8.88149c-11.73376 14.78942-16.0262 27.03633-16.0262 43.04008 0 24.804153 9.076575 48.834136 21.718428 72.709595l1.158928 2.170087c.38948.723233.782082 1.44634 1.17765 2.16934l1.195454 2.168696c.8027 1.445605 1.616654 2.890849 2.440637 4.335871l1.243342 2.167383c.416853.722416.836059 1.444795 1.257465 2.167152l1.270667 2.167025 1.282949 2.167001c.214797.361171.430068.722345.645793 1.083524l1.299647 2.16716 1.309629 2.167394 1.31869 2.167733 1.326831 2.168175 1.334053 2.16872 2.686089 4.339489 10.996368 17.637505 2.071137 3.344474 1.999135 3.248295 1.325848 2.167973 1.319277 2.170045 1.311808 2.172218 1.303445 2.174491c.216495.36261.432603.725319.648307 1.088129l1.28922 2.17809 1.278617 2.180616 1.267119 2.183241c.210179.364098.419841.728309.628968 1.092637l1.248191 2.187368c16.346038 28.81908 29.119588 58.386476 29.119588 89.736683 0 61.08419-42.74809 116.05997-152.67175 193.17876 26.71756-20.61591 44.27481-42.75893 44.27481-75.59169 0-29.714407-9.877977-56.018733-22.948511-81.250513l-1.096458-2.100215c-.367854-.699278-.738028-1.397778-1.110379-2.095551l-1.12344-2.091187-1.13564-2.087122c-.380485-.695064-.76286-1.389501-1.146982-2.08336l-1.157464-2.079898c-.193736-.346377-.387873-.692623-.582393-1.038744l-1.171574-2.075267-1.179907-2.072557-1.187378-2.070146-1.193992-2.068036-1.801505-3.098757-2.417127-4.127097-6.46343-10.96806-2.57812-4.39136-1.76975-3.033775-1.174109-2.02476-1.168589-2.026885-1.162264-2.029289-1.155132-2.031978-1.147195-2.034946-1.138451-2.038198c-.188968-.339986-.377539-.680119-.565694-1.020406l-1.123824-2.043602c-.37286-.681845-.743926-1.364349-1.113065-2.047559l-1.101501-2.051796-1.089129-2.056315-1.075952-2.061116-1.06197-2.066199c-.527355-1.034417-1.049164-2.070846-1.564973-3.109446l-1.023486-2.080139c-11.336604-23.261587-19.530156-47.658394-19.530156-74.956311 0-52.68511 35.1145-106.13378 119.84732-177.14416z" />
<path d="m800 1.5271c78.62595 0 123.66412 38.17763 123.66412 165.69088l-.009 4.04965c-2.66458 323.78634-3.98573 485.72835-3.96344 485.82602.03343.1465-.03344 37.92335 49.77397 36.21194 9.28857-.31916 16.06749-2.51301 24.40936-7.13126l1.17454-.65802c.19759-.11194.39612-.225.59566-.33919l1.20961-.69855c.20374-.11866.40859-.23843.61458-.35931l1.25023-.73853 1.28037-.76487-1.15805 1.06668-1.95082 1.81334-2.9772 2.79193-1.63997 1.546-5.47308 5.18319-22.9137 21.79369-77.81264 70.45918c-5.80455 4.84176-11.85764 7.58819-22.71576 7.58819-12.9771 0-34.35115-7.63552-61.0687-35.88696-.91603-1.0308-1.80344-2.05205-2.66279-3.06586l-1.01779-1.21313c-15.4008-18.55064-21.38136-34.86518-21.5082-62.02415l-.00206-.88947 7.63358-459.65856c0-98.49826-20.61068-125.98614-95.41984-125.98614-39.32825 0-65.08825 16.80304-80.84651 30.78833l-3.88147 3.56588 11.51818-11.87195 26.09386-26.81337c58.71562-59.79359 103.2954-99.3183 155.88292-100.25843z" />
<path d="m597.69051 159.60225-.72142 52.82745-1.24208 70.3262-.10591 5.87529c30.88599 5.98872 51.72104 8.98308 62.50517 8.98308 24.82476 0 54.56559-7.83295 89.22249-23.49885.30147-.16506.60494-.33105.91048-.49799l-21.0731 16.32867-26.07023 20.02094c-43.9909 33.31576-72.08851 51.08728-106.93278 57.66328l-1.50981 82.08231 16.37688 3.65541c16.76474 3.49226 33.2739 6.00305 49.07607 6.00305 24.82476 0 54.56559-7.83294 89.22249-23.49884.30147-.16506.60494-.33105.91048-.49799l-23.52869 18.22929-29.73067 22.72748c-41.74421 31.26197-69.21374 47.75536-103.79682 53.58848-1.26006 41.53366-1.62581 62.30049-1.09726 62.30049 0 42.65165 5.38492 68.89774 16.15476 78.73829 9.23165 11.34039 23.19746 23.11085 42.5944 23.11085 20.61069 0 48.85496-10.68973 74.0458-29.01499l-1.91771 1.78266-2.17057 2.03871-4.13852 3.92317-4.72914 4.5153-102.31123 94.6375c-18.32061 14.50749-35.87786 22.14302-58.01527 22.14302-12.9771 0-31.29771-7.63553-58.01527-35.88696-18.1374-20.40976-29.54129-43.81295-29.76756-73.17306l-.00343-.89153 2.81351-168.00291c-39.21063-8.63244-64.59542-12.94866-76.15438-12.94866-17.23221 0-42.36438 7.68201-75.39652 23.04603l27.84123-21.89666c56.16476-42.16437 90.60018-62.45303 125.06721-69.31021l1.33913-79.95285-25.88051-6.42773c-17.99504-4.14746-35.64323-7.2154-52.97054-7.2154-18.18955 0-44.66929 8.52061-79.43923 25.56184l20.0785-15.47465c64.82862-49.45913 101.84825-72.02225 139.59092-78.76106l.74427-44.45853c0-89.33563-31.29771-123.69549-117.55725-123.69549-43.05344 0-82.73435 21.5896-112.06838 42.57199-3.2623 2.37456-5.09193 3.70947-5.48887 4.00471l4.98045-4.97489c81.15298-80.94339 152.77527-146.20849 214.86687-146.20849 77.8397 0 142.21237 35.17281 143.49204 159.60225z" />
</mask>
</defs>
</svg>
<div>
<video playsinline autoplay muted loop>
<source src="https://media.gettyimages.com/videos/aerial-view-of-clear-turquoise-sea-and-waves-video-id1194337503" type="video/mp4">
</video>
</div>
</figure>Here you have the same mask, but add as an image in CSS. That is easier to control:
path {
fill: white;
}
video {
mask: no-repeat center url('data:image/svg xml;base64,ICA8c3ZnIHZpZXdCb3g9IjAgMCAxMDAwIDgwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8ZGVmcz4KICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2siPgogICAgICAgICAgICAgICAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Im0xODYuMjU5NTQgNjQyLjE0NzU4YzE1LjY4NDQ4MSAwIDMyLjE1ODY0OCAzLjczNDAwNyA0OC45NjAxNzEgOC45MTE4MzJsMi4xOTMzMjEuNjgzMzY4YzEuMDk3NTUxLjM0NTU5IDIuMTk2NDA5LjY5Njg5NyAzLjI5NjQ0NiAxLjA1MzI4N2wyLjIwMTYwNi43MTkzNjdjLjM2NzE4NC4xMjA5NjEuNzM0NDg5LjI0MjQ0IDEuMTAxOTEuMzY0NDEzbDIuMjA1ODk0LjczNzU3OCAyLjIwODQ2Ni43NDgzMDggMi4yMTA4MTEuNzU3OTA3IDIuMjEyOTI4Ljc2NjM3OGMuMzY4OTg1LjEyODM3Mi43MzgwNDkuMjU3MDUxIDEuMTA3MTg3LjM4NjAxMmwyNi42NDAwOCA5LjQ0NzgyIDEuMTI3NjI4LjM5MjIyNCAyLjI1NDM5My43Nzg2MDcgMi4yNTMwNDIuNzY5ODMzIDIuMjUxNDUyLjc1OTg3NWMuNzUwMTkyLjI1MTUgMS41MDAwNzkuNTAxMTQyIDIuMjQ5NjIyLjc0ODczbDIuMjQ3NTU1LjczNjQwMmMyLjk5NTI1My45NzMxMjMgNS45ODQzNTQgMS45MTAyMSA4Ljk2NDc0OSAyLjc5ODYyMmwyLjIzMzYyNC42NTY5ODRjMTUuMjUxNDAxIDQuNDI0MzI5IDMwLjI1NzQwMSA3LjQ4NzE3MyA0NC42NzQ1MzUgNy40ODcxNzMgMzAuMTg3Nzg2IDAgNDUuNjgyNTcyLTMuOTU2ODA4IDYwLjA2NTEwMi0xMi41NTgyMzZsMS4xMDQzODQtLjY3MDgyMWMxLjQ3MDE5Ny0uOTA2Njc0IDIuOTMyMzU2LTEuODYyMzkxIDQuNDAxMTMxLTIuODY3ODk1bDEuMTAzMDUxLS43NjM0NzRjLjE4NDEyNS0uMTI4ODA2LjM2ODQxLS4yNTgzOTIuNTUyODg1LS4zODg3NmwxLjEwOTM0Ny0uNzkxNjEgMS4xMTUyNjItLjgxMDQ1MyAxLjEyMjU1MS0uODI5MzY3IDEuMTMxMjEzLS44NDgzNDljLjE4OTMzNC0uMTQyOTc3LjM3OTA4NS0uMjg2NzQ4LjU2OTI4NC0uNDMxMzE1bDE2Ljg5MjIyLTEzLjQzNDI0LjkwOTkxLS43Mjg4OS0zMi44NDM2OCAzNy4yMjk5Ny0yLjAwODYwOCAyLjI2Mjc0My0zLjk1Mjg2NSA0LjQ0MTMyNWMtNjMuMjIzNTY4IDcwLjg5Nzg2My05My44MTgzNiA5OC4wODY3MTItMTUwLjUwNzgyNyA5OC4wODY3MTItMjIuMTc3OTY0IDAtNDMuODM5NzE0LTUuNzgzMDczLTY1LjAyMzIxNi0xMy4wOTU2MzdsLTIuMjY3ODMzLS43ODkxNDdjLS4zNzc2NjctLjEzMjQzNi0uNzU1MTgzLS4yNjUzMTEtMS4xMzI1NDctLjM5ODZsLTIuMjYyMzYxLS44MDQ1MjZjLS4zNzY3NTgtLjEzNDg1My0uNzUzMzYzLS4yNzAwNzMtMS4xMjk4MTgtLjQwNTYzNWwtMi4yNTY5MTUtLjgxNzI4OC0yLjI1MzI5Ni0uODI0MzQzYy0uMzc1MjQ4LS4xMzc5MTQtLjc1MDM0Ni0uMjc2MDczLTEuMTI1Mjk0LS40MTQ0NTRsLTIuODM2MTM2LS45OTgyODgtMi43OTYxMTItLjk3ODEyMS0yLjc1NjA4OC0uOTU3OTU0LTIuNzE2MDY0LS45Mzc3ODUtMy45OTkwNTMtMS4zNjg4NjUtMi42MTYwMDUtLjg4NzM2OC0yLjU3NTk4MS0uODY3Mi0yLjUzNTk1OC0uODQ3MDMyLTIuNDk1OTM0LS44MjY4NjUtMi40NTU5MS0uODA2Njk4LTMuNjA4ODIxLTEuMTcyMjMyYy0uMzk1OTc3LS4xMjc3MjctLjc5MDI4Ny0uMjU0NjE0LTEuMTgyOTI4LS4zODA2NjFsLTIuMzM1ODQtLjc0NjE5NS0yLjI5NTgxNS0uNzI2MDI4LTIuMjU1NzkxLS43MDU4Ni0zLjMwODY0My0xLjAyMDk3Ny0yLjE1NTczMy0uNjU1NDQyLTIuMTE1NzA4LS42MzUyNzQtMi4wNzU2ODUtLjYxNTEwNy0yLjAzNTY2MS0uNTk0OTM5LTEuOTk1NjM4LS41NzQ3NzMtMS45NTU2MTMtLjU1NDYwNC0xLjkxNTU5LS41MzQ0MzdjLS4zMTU5My0uMDg3MzkzLS42MzAxOTItLjE3Mzk0NC0uOTQyNzg3LS4yNTk2NTZsLTEuODU1NTU0LS41MDQxODZjLS4zMDU5MjQtLjA4MjM1LS42MTAxOC0uMTYzODYxLS45MTI3NjgtLjI0NDUzbC0xLjc5NTUxOS0uNDczOTM1LTEuNzU1NDk1LS40NTM3NjhjLS4yODkyNDgtLjA3Mzk0Ny0uNTc2ODI3LS4xNDcwNTQtLjg2MjczOS0uMjE5MzJsLTEuNjk1NDYtLjQyMzUxNy0xLjY1NTQzNi0uNDAzMzQ4Yy0uMjcyNTctLjA2NTU0NS0uNTQzNDczLS4xMzAyNDktLjgxMjcwOS0uMTk0MTEybC0xLjU5NTQtLjM3MzA5OC0xLjU1NTM3NjgtLjM1MjkzLTEuNTE1MzUzLS4zMzI3NjNjLS43NDc2NzA2LS4xNjEzMzktMS40ODAzMzIzLS4zMTUxMTYtMi4xOTc5ODUtLjQ2MTMzbC0xLjQxNTI5MzgtLjI4MjM0NGMtLjIzMjU0Ny0uMDQ1Mzc3LS40NjM0MjYzLS4wODk5MTMtLjY5MjYzOC0uMTMzNjA5bC0xLjM1NTI1ODItLjI1MjA5My0xLjMxNTIzNDUtLjIzMTkyNmMtLjIxNTg3MDUtLjAzNjk3NC0uNDMwMDczMy0uMDczMTA3LS42NDI2MDg0LS4xMDg0bC0xLjI1NTE5OS0uMjAxNjc0Yy0uNDExNzI5LS4wNjM4NjQtLjgxNjc4NzUtLjEyNDM2Ni0xLjIxNTE3NTMtLjE4MTUwN2wtMS4xNzUxNTE2LS4xNjEzNGMtMi44ODc4NDk1LS4zNzgxMzktNS40MDA0NzY5LS41NjcyMDktNy41Mzc4ODI0LS41NjcyMDktMjQuNzAxOTA5NSAwLTM5Ljk5NTUzOTYgNS43OTExNy01Ni4wOTU1NyAxNy42MjI3MjFsLTEuMTM3OTQ1Mi44NDUyMDVjLS4zNzk4NTAyLjI4NTA4MS0uNzYwMjc5OS41NzM1MDktMS4xNDE0MjIyLjg2NTI4OGwtMS4xNDU2OTc3Ljg4NTM5MmMtLjM4MjcwMDUuMjk4NDg0LS43NjYyNDY2LjYwMDMyMS0xLjE1MDc3MTUuOTA1NTE2bC0xLjE1NjY0MzcuOTI1NjU5Yy0uMTkzMzA3Ny4xNTU5NTYtLjM4Njg5MzMuMzEyNzUyLS41ODA3NzM1LjQ3MDM4OWwtMS4xNjY5NDkuOTU1OTA5LTEuMTc0ODE3Mi45NzYxMDEtMS40NjI0NCAxLjIzMjk1LS43MzY2My42MjgwMy0xLjg1ODkyNjIgMS42MDM4NTEtMS44ODYwMTM4IDEuNjUyMTM5LTEuNTMwMjkgMS4zNTY1My0xLjU1MTAxIDEuMzg3NTItMS41NzMyNCAxLjQxODU0LTIuNDA0ODEgMi4xODYwNi0xLjYzNTM2IDEuNDk2MjZjOTMuODkzMTMtMTA2Ljg5NzMzIDEzMy41ODc3OS0xNDEuMjU3MTkgMTg2LjI1OTU0LTE0MS4yNTcxOXoiIC8 CiAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSJ3aGl0ZSIgZD0ibTIyOS4wMDc2MyAxNTUuNzY0NjktNy42Mzc5MiA4Ljg4MTQ5Yy0xMS43MzM3NiAxNC43ODk0Mi0xNi4wMjYyIDI3LjAzNjMzLTE2LjAyNjIgNDMuMDQwMDggMCAyNC44MDQxNTMgOS4wNzY1NzUgNDguODM0MTM2IDIxLjcxODQyOCA3Mi43MDk1OTVsMS4xNTg5MjggMi4xNzAwODdjLjM4OTQ4LjcyMzIzMy43ODIwODIgMS40NDYzNCAxLjE3NzY1IDIuMTY5MzRsMS4xOTU0NTQgMi4xNjg2OTZjLjgwMjcgMS40NDU2MDUgMS42MTY2NTQgMi44OTA4NDkgMi40NDA2MzcgNC4zMzU4NzFsMS4yNDMzNDIgMi4xNjczODNjLjQxNjg1My43MjI0MTYuODM2MDU5IDEuNDQ0Nzk1IDEuMjU3NDY1IDIuMTY3MTUybDEuMjcwNjY3IDIuMTY3MDI1IDEuMjgyOTQ5IDIuMTY3MDAxYy4yMTQ3OTcuMzYxMTcxLjQzMDA2OC43MjIzNDUuNjQ1NzkzIDEuMDgzNTI0bDEuMjk5NjQ3IDIuMTY3MTYgMS4zMDk2MjkgMi4xNjczOTQgMS4zMTg2OSAyLjE2NzczMyAxLjMyNjgzMSAyLjE2ODE3NSAxLjMzNDA1MyAyLjE2ODcyIDIuNjg2MDg5IDQuMzM5NDg5IDEwLjk5NjM2OCAxNy42Mzc1MDUgMi4wNzExMzcgMy4zNDQ0NzQgMS45OTkxMzUgMy4yNDgyOTUgMS4zMjU4NDggMi4xNjc5NzMgMS4zMTkyNzcgMi4xNzAwNDUgMS4zMTE4MDggMi4xNzIyMTggMS4zMDM0NDUgMi4xNzQ0OTFjLjIxNjQ5NS4zNjI2MS40MzI2MDMuNzI1MzE5LjY0ODMwNyAxLjA4ODEyOWwxLjI4OTIyIDIuMTc4MDkgMS4yNzg2MTcgMi4xODA2MTYgMS4yNjcxMTkgMi4xODMyNDFjLjIxMDE3OS4zNjQwOTguNDE5ODQxLjcyODMwOS42Mjg5NjggMS4wOTI2MzdsMS4yNDgxOTEgMi4xODczNjhjMTYuMzQ2MDM4IDI4LjgxOTA4IDI5LjExOTU4OCA1OC4zODY0NzYgMjkuMTE5NTg4IDg5LjczNjY4MyAwIDYxLjA4NDE5LTQyLjc0ODA5IDExNi4wNTk5Ny0xNTIuNjcxNzUgMTkzLjE3ODc2IDI2LjcxNzU2LTIwLjYxNTkxIDQ0LjI3NDgxLTQyLjc1ODkzIDQ0LjI3NDgxLTc1LjU5MTY5IDAtMjkuNzE0NDA3LTkuODc3OTc3LTU2LjAxODczMy0yMi45NDg1MTEtODEuMjUwNTEzbC0xLjA5NjQ1OC0yLjEwMDIxNWMtLjM2Nzg1NC0uNjk5Mjc4LS43MzgwMjgtMS4zOTc3NzgtMS4xMTAzNzktMi4wOTU1NTFsLTEuMTIzNDQtMi4wOTExODctMS4xMzU2NC0yLjA4NzEyMmMtLjM4MDQ4NS0uNjk1MDY0LS43NjI4Ni0xLjM4OTUwMS0xLjE0Njk4Mi0yLjA4MzM2bC0xLjE1NzQ2NC0yLjA3OTg5OGMtLjE5MzczNi0uMzQ2Mzc3LS4zODc4NzMtLjY5MjYyMy0uNTgyMzkzLTEuMDM4NzQ0bC0xLjE3MTU3NC0yLjA3NTI2Ny0xLjE3OTkwNy0yLjA3MjU1Ny0xLjE4NzM3OC0yLjA3MDE0Ni0xLjE5Mzk5Mi0yLjA2ODAzNi0xLjgwMTUwNS0zLjA5ODc1Ny0yLjQxNzEyNy00LjEyNzA5Ny02LjQ2MzQzLTEwLjk2ODA2LTIuNTc4MTItNC4zOTEzNi0xLjc2OTc1LTMuMDMzNzc1LTEuMTc0MTA5LTIuMDI0NzYtMS4xNjg1ODktMi4wMjY4ODUtMS4xNjIyNjQtMi4wMjkyODktMS4xNTUxMzItMi4wMzE5NzgtMS4xNDcxOTUtMi4wMzQ5NDYtMS4xMzg0NTEtMi4wMzgxOThjLS4xODg5NjgtLjMzOTk4Ni0uMzc3NTM5LS42ODAxMTktLjU2NTY5NC0xLjAyMDQwNmwtMS4xMjM4MjQtMi4wNDM2MDJjLS4zNzI4Ni0uNjgxODQ1LS43NDM5MjYtMS4zNjQzNDktMS4xMTMwNjUtMi4wNDc1NTlsLTEuMTAxNTAxLTIuMDUxNzk2LTEuMDg5MTI5LTIuMDU2MzE1LTEuMDc1OTUyLTIuMDYxMTE2LTEuMDYxOTctMi4wNjYxOTljLS41MjczNTUtMS4wMzQ0MTctMS4wNDkxNjQtMi4wNzA4NDYtMS41NjQ5NzMtMy4xMDk0NDZsLTEuMDIzNDg2LTIuMDgwMTM5Yy0xMS4zMzY2MDQtMjMuMjYxNTg3LTE5LjUzMDE1Ni00Ny42NTgzOTQtMTkuNTMwMTU2LTc0Ljk1NjMxMSAwLTUyLjY4NTExIDM1LjExNDUtMTA2LjEzMzc4IDExOS44NDczMi0xNzcuMTQ0MTZ6IiAvPgogICAgICAgICAgICAgICAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Im04MDAgMS41MjcxYzc4LjYyNTk1IDAgMTIzLjY2NDEyIDM4LjE3NzYzIDEyMy42NjQxMiAxNjUuNjkwODhsLS4wMDkgNC4wNDk2NWMtMi42NjQ1OCAzMjMuNzg2MzQtMy45ODU3MyA0ODUuNzI4MzUtMy45NjM0NCA0ODUuODI2MDIuMDMzNDMuMTQ2NS0uMDMzNDQgMzcuOTIzMzUgNDkuNzczOTcgMzYuMjExOTQgOS4yODg1Ny0uMzE5MTYgMTYuMDY3NDktMi41MTMwMSAyNC40MDkzNi03LjEzMTI2bDEuMTc0NTQtLjY1ODAyYy4xOTc1OS0uMTExOTQuMzk2MTItLjIyNS41OTU2Ni0uMzM5MTlsMS4yMDk2MS0uNjk4NTVjLjIwMzc0LS4xMTg2Ni40MDg1OS0uMjM4NDMuNjE0NTgtLjM1OTMxbDEuMjUwMjMtLjczODUzIDEuMjgwMzctLjc2NDg3LTEuMTU4MDUgMS4wNjY2OC0xLjk1MDgyIDEuODEzMzQtMi45NzcyIDIuNzkxOTMtMS42Mzk5NyAxLjU0Ni01LjQ3MzA4IDUuMTgzMTktMjIuOTEzNyAyMS43OTM2OS03Ny44MTI2NCA3MC40NTkxOGMtNS44MDQ1NSA0Ljg0MTc2LTExLjg1NzY0IDcuNTg4MTktMjIuNzE1NzYgNy41ODgxOS0xMi45NzcxIDAtMzQuMzUxMTUtNy42MzU1Mi02MS4wNjg3LTM1Ljg4Njk2LS45MTYwMy0xLjAzMDgtMS44MDM0NC0yLjA1MjA1LTIuNjYyNzktMy4wNjU4NmwtMS4wMTc3OS0xLjIxMzEzYy0xNS40MDA4LTE4LjU1MDY0LTIxLjM4MTM2LTM0Ljg2NTE4LTIxLjUwODItNjIuMDI0MTVsLS4wMDIwNi0uODg5NDcgNy42MzM1OC00NTkuNjU4NTZjMC05OC40OTgyNi0yMC42MTA2OC0xMjUuOTg2MTQtOTUuNDE5ODQtMTI1Ljk4NjE0LTM5LjMyODI1IDAtNjUuMDg4MjUgMTYuODAzMDQtODAuODQ2NTEgMzAuNzg4MzNsLTMuODgxNDcgMy41NjU4OCAxMS41MTgxOC0xMS44NzE5NSAyNi4wOTM4Ni0yNi44MTMzN2M1OC43MTU2Mi01OS43OTM1OSAxMDMuMjk1NC05OS4zMTgzIDE1NS44ODI5Mi0xMDAuMjU4NDN6IiAvPgogICAgICAgICAgICAgICAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Im01OTcuNjkwNTEgMTU5LjYwMjI1LS43MjE0MiA1Mi44Mjc0NS0xLjI0MjA4IDcwLjMyNjItLjEwNTkxIDUuODc1MjljMzAuODg1OTkgNS45ODg3MiA1MS43MjEwNCA4Ljk4MzA4IDYyLjUwNTE3IDguOTgzMDggMjQuODI0NzYgMCA1NC41NjU1OS03LjgzMjk1IDg5LjIyMjQ5LTIzLjQ5ODg1LjMwMTQ3LS4xNjUwNi42MDQ5NC0uMzMxMDUuOTEwNDgtLjQ5Nzk5bC0yMS4wNzMxIDE2LjMyODY3LTI2LjA3MDIzIDIwLjAyMDk0Yy00My45OTA5IDMzLjMxNTc2LTcyLjA4ODUxIDUxLjA4NzI4LTEwNi45MzI3OCA1Ny42NjMyOGwtMS41MDk4MSA4Mi4wODIzMSAxNi4zNzY4OCAzLjY1NTQxYzE2Ljc2NDc0IDMuNDkyMjYgMzMuMjczOSA2LjAwMzA1IDQ5LjA3NjA3IDYuMDAzMDUgMjQuODI0NzYgMCA1NC41NjU1OS03LjgzMjk0IDg5LjIyMjQ5LTIzLjQ5ODg0LjMwMTQ3LS4xNjUwNi42MDQ5NC0uMzMxMDUuOTEwNDgtLjQ5Nzk5bC0yMy41Mjg2OSAxOC4yMjkyOS0yOS43MzA2NyAyMi43Mjc0OGMtNDEuNzQ0MjEgMzEuMjYxOTctNjkuMjEzNzQgNDcuNzU1MzYtMTAzLjc5NjgyIDUzLjU4ODQ4LTEuMjYwMDYgNDEuNTMzNjYtMS42MjU4MSA2Mi4zMDA0OS0xLjA5NzI2IDYyLjMwMDQ5IDAgNDIuNjUxNjUgNS4zODQ5MiA2OC44OTc3NCAxNi4xNTQ3NiA3OC43MzgyOSA5LjIzMTY1IDExLjM0MDM5IDIzLjE5NzQ2IDIzLjExMDg1IDQyLjU5NDQgMjMuMTEwODUgMjAuNjEwNjkgMCA0OC44NTQ5Ni0xMC42ODk3MyA3NC4wNDU4LTI5LjAxNDk5bC0xLjkxNzcxIDEuNzgyNjYtMi4xNzA1NyAyLjAzODcxLTQuMTM4NTIgMy45MjMxNy00LjcyOTE0IDQuNTE1My0xMDIuMzExMjMgOTQuNjM3NWMtMTguMzIwNjEgMTQuNTA3NDktMzUuODc3ODYgMjIuMTQzMDItNTguMDE1MjcgMjIuMTQzMDItMTIuOTc3MSAwLTMxLjI5NzcxLTcuNjM1NTMtNTguMDE1MjctMzUuODg2OTYtMTguMTM3NC0yMC40MDk3Ni0yOS41NDEyOS00My44MTI5NS0yOS43Njc1Ni03My4xNzMwNmwtLjAwMzQzLS44OTE1MyAyLjgxMzUxLTE2OC4wMDI5MWMtMzkuMjEwNjMtOC42MzI0NC02NC41OTU0Mi0xMi45NDg2Ni03Ni4xNTQzOC0xMi45NDg2Ni0xNy4yMzIyMSAwLTQyLjM2NDM4IDcuNjgyMDEtNzUuMzk2NTIgMjMuMDQ2MDNsMjcuODQxMjMtMjEuODk2NjZjNTYuMTY0NzYtNDIuMTY0MzcgOTAuNjAwMTgtNjIuNDUzMDMgMTI1LjA2NzIxLTY5LjMxMDIxbDEuMzM5MTMtNzkuOTUyODUtMjUuODgwNTEtNi40Mjc3M2MtMTcuOTk1MDQtNC4xNDc0Ni0zNS42NDMyMy03LjIxNTQtNTIuOTcwNTQtNy4yMTU0LTE4LjE4OTU1IDAtNDQuNjY5MjkgOC41MjA2MS03OS40MzkyMyAyNS41NjE4NGwyMC4wNzg1LTE1LjQ3NDY1YzY0LjgyODYyLTQ5LjQ1OTEzIDEwMS44NDgyNS03Mi4wMjIyNSAxMzkuNTkwOTItNzguNzYxMDZsLjc0NDI3LTQ0LjQ1ODUzYzAtODkuMzM1NjMtMzEuMjk3NzEtMTIzLjY5NTQ5LTExNy41NTcyNS0xMjMuNjk1NDktNDMuMDUzNDQgMC04Mi43MzQzNSAyMS41ODk2LTExMi4wNjgzOCA0Mi41NzE5OS0zLjI2MjMgMi4zNzQ1Ni01LjA5MTkzIDMuNzA5NDctNS40ODg4NyA0LjAwNDcxbDQuOTgwNDUtNC45NzQ4OWM4MS4xNTI5OC04MC45NDMzOSAxNTIuNzc1MjctMTQ2LjIwODQ5IDIxNC44NjY4Ny0xNDYuMjA4NDkgNzcuODM5NyAwIDE0Mi4yMTIzNyAzNS4xNzI4MSAxNDMuNDkyMDQgMTU5LjYwMjI1eiIgLz4KICAgICAgICAgICAgPC9tYXNrPgogICAgICAgIDwvZGVmcz4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0icmVkIiBtYXNrPSJ1cmwoI21hc2spIi8 CiAgICA8L3N2Zz4=');
}<figure>
<div>
<video playsinline autoplay muted loop>
<source src="https://media.gettyimages.com/videos/aerial-view-of-clear-turquoise-sea-and-waves-video-id1194337503" type="video/mp4">
</video>
</div>
</figure>