使用 SVG 路径遮罩遮罩视频
Masking video with SVG path mask
我正在尝试使用 SVG 路径屏蔽视频。我在 defs 中定义了一个 id 为 #mask 的掩码。我在视频标签中引用了这个面具，但它不起作用。
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>
我在这里创建了一个 Codepen 示例：https://codepen.io/henken/pen/rNpebvZ
使用mask时需要指定透明区域。所以，<path>s 需要某种填充。这可以是纯色、渐变等。这里我用白色设置路径样式。
您还需要确保遮罩的尺寸适合被遮罩的内容。
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>
这里有相同的蒙版，但在 CSS 中添加为图像。这样比较容易控制：
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>
我正在尝试使用 SVG 路径屏蔽视频。我在 defs 中定义了一个 id 为 #mask 的掩码。我在视频标签中引用了这个面具，但它不起作用。
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>
我在这里创建了一个 Codepen 示例：https://codepen.io/henken/pen/rNpebvZ
使用mask时需要指定透明区域。所以，<path>s 需要某种填充。这可以是纯色、渐变等。这里我用白色设置路径样式。
您还需要确保遮罩的尺寸适合被遮罩的内容。
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>
这里有相同的蒙版，但在 CSS 中添加为图像。这样比较容易控制：
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>