Audio Style
<section class="audio-video elements-page elements-img">
<div class="container">
<div class="audio-block">
<audio controls="">
<source src="../themes/custom/charity_plus/assets/theme/audio/welcome.mp3" type="audio/mpeg">
</audio>
</div>
</div>
</section>
Video Style 1
<section class="audio-video elements-page elements-img">
<div class="container">
<div class="audio-block">
<div class="video1">
<div class="img-wrapper">
<img src="../themes/custom/charity_plus/assets/theme/img/home/home-1/yannis-h-uaPaEM7MiQQ-unsplash.jpg" alt="Video Banner" />
</div>
<a class="play-icon video-popup" href="https://www.youtube.com/watch?v=h1D5IFsUEFc">
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 57.23 63.89"><defs><style>.cls-1{fill:#ed4b4b;}</style></defs><title>Play</title><path class="cls-1" d="M42.45,32.88a3.21,3.21,0,0,1,1.37-3.48,3.4,3.4,0,0,1,3.84.17c4.68,2.71,9.31,5.53,14.11,8,2.95,1.54,3.32,5,.17,6.43-.67,1-1.8,1.28-2.75,1.81L35.61,59q-9.48,5.31-19,10.62L12,72.22a3.61,3.61,0,0,1-3.39.14,2.81,2.81,0,0,1-1.66-2.07V58.86A7.92,7.92,0,0,0,7,56.53c0-2.75,0-5.5,0-8.25V12.58c0-.29,0-.58,0-.87C7.17,10,7.76,9.28,9.5,8.82h1.94c4.48,2.58,8.94,5.17,13.43,7.72a3.36,3.36,0,0,1,2.07,3.21,3.22,3.22,0,0,1-2.3,2.93c-.69.74-1.46.4-2.18.11-1.26-.52-2.36-1.33-3.58-1.94s-2.43-1.39-3.66-2.06c-.36-.2-.72-.67-1.14-.42s-.15.73-.15,1.11c0,8,.12,16,0,23.92-.13,6.1-.15,12.2-.17,18.31,0,.25,0,.5,0,.75,0,.55.25.6.68.39.65-.32,1.25-.72,1.89-1,2.85-1.43,5.59-3.08,8.38-4.63q9.73-5.41,19.45-10.86c3-1.67,6-3.39,9-5,.85-.47.39-.69-.09-1l-8.6-4.91C43.45,34.84,42.44,34.26,42.45,32.88Z" transform="translate(-6.91 -8.82)"/><path class="cls-1" d="M37.14,29.89a4,4,0,0,1-2.94-.64q-1.17-.73-2.4-1.38a3.52,3.52,0,0,1-1.89-2.18,3.12,3.12,0,0,1,1.28-3.4,3.21,3.21,0,0,1,3.73,0c.8.48,1.59,1,2.42,1.39a3.37,3.37,0,0,1,2.13,3.18A3.24,3.24,0,0,1,37.14,29.89Z" transform="translate(-6.91 -8.82)"/></svg>
</div>
<span>LET'S PLAY</span>
</a>
</div>
</div>
</div>
</section>
Video Style 2
<section class="audio-video elements-page elements-img">
<div class="container">
<div class="audio-block">
<div class="video2">
<div class="img-wrapper">
<img src="../themes/custom/charity_plus/assets/theme/img/home/home-1/yannis-h-uaPaEM7MiQQ-unsplash.jpg" alt="Video Banner" />
</div>
<a class="play-icon video-popup" href="https://www.youtube.com/watch?v=h1D5IFsUEFc">
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 57.23 63.89"><defs><style>.cls-1{fill:#ed4b4b;}</style></defs><title>Play</title><path class="cls-1" d="M42.45,32.88a3.21,3.21,0,0,1,1.37-3.48,3.4,3.4,0,0,1,3.84.17c4.68,2.71,9.31,5.53,14.11,8,2.95,1.54,3.32,5,.17,6.43-.67,1-1.8,1.28-2.75,1.81L35.61,59q-9.48,5.31-19,10.62L12,72.22a3.61,3.61,0,0,1-3.39.14,2.81,2.81,0,0,1-1.66-2.07V58.86A7.92,7.92,0,0,0,7,56.53c0-2.75,0-5.5,0-8.25V12.58c0-.29,0-.58,0-.87C7.17,10,7.76,9.28,9.5,8.82h1.94c4.48,2.58,8.94,5.17,13.43,7.72a3.36,3.36,0,0,1,2.07,3.21,3.22,3.22,0,0,1-2.3,2.93c-.69.74-1.46.4-2.18.11-1.26-.52-2.36-1.33-3.58-1.94s-2.43-1.39-3.66-2.06c-.36-.2-.72-.67-1.14-.42s-.15.73-.15,1.11c0,8,.12,16,0,23.92-.13,6.1-.15,12.2-.17,18.31,0,.25,0,.5,0,.75,0,.55.25.6.68.39.65-.32,1.25-.72,1.89-1,2.85-1.43,5.59-3.08,8.38-4.63q9.73-5.41,19.45-10.86c3-1.67,6-3.39,9-5,.85-.47.39-.69-.09-1l-8.6-4.91C43.45,34.84,42.44,34.26,42.45,32.88Z" transform="translate(-6.91 -8.82)"/><path class="cls-1" d="M37.14,29.89a4,4,0,0,1-2.94-.64q-1.17-.73-2.4-1.38a3.52,3.52,0,0,1-1.89-2.18,3.12,3.12,0,0,1,1.28-3.4,3.21,3.21,0,0,1,3.73,0c.8.48,1.59,1,2.42,1.39a3.37,3.37,0,0,1,2.13,3.18A3.24,3.24,0,0,1,37.14,29.89Z" transform="translate(-6.91 -8.82)"/></svg>
</div>
</a>
</div>
</div>
</div>
</section>
Video Style 3
<section class="audio-video elements-page elements-img">
<div class="container">
<div class="audio-block">
<div class="video3">
<div class="img-wrapper1">
<img src="../themes/custom/charity_plus/assets/theme/img/home/home-3/pexels-kazim-balti-9400795.jpg" alt="Video Image"/>
</div>
<div class="img-wrapper2">
<img src="../themes/custom/charity_plus/assets/theme/img/home/home-3/xCharity.jpg" alt="Video Image"/>
<a class="play-icon video-popup" href="https://www.youtube.com/watch?v=h1D5IFsUEFc">
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 57.23 63.89"><defs><style>.cls-1{fill:#ed4b4b;}</style></defs><title>Play</title><path class="cls-1" d="M42.45,32.88a3.21,3.21,0,0,1,1.37-3.48,3.4,3.4,0,0,1,3.84.17c4.68,2.71,9.31,5.53,14.11,8,2.95,1.54,3.32,5,.17,6.43-.67,1-1.8,1.28-2.75,1.81L35.61,59q-9.48,5.31-19,10.62L12,72.22a3.61,3.61,0,0,1-3.39.14,2.81,2.81,0,0,1-1.66-2.07V58.86A7.92,7.92,0,0,0,7,56.53c0-2.75,0-5.5,0-8.25V12.58c0-.29,0-.58,0-.87C7.17,10,7.76,9.28,9.5,8.82h1.94c4.48,2.58,8.94,5.17,13.43,7.72a3.36,3.36,0,0,1,2.07,3.21,3.22,3.22,0,0,1-2.3,2.93c-.69.74-1.46.4-2.18.11-1.26-.52-2.36-1.33-3.58-1.94s-2.43-1.39-3.66-2.06c-.36-.2-.72-.67-1.14-.42s-.15.73-.15,1.11c0,8,.12,16,0,23.92-.13,6.1-.15,12.2-.17,18.31,0,.25,0,.5,0,.75,0,.55.25.6.68.39.65-.32,1.25-.72,1.89-1,2.85-1.43,5.59-3.08,8.38-4.63q9.73-5.41,19.45-10.86c3-1.67,6-3.39,9-5,.85-.47.39-.69-.09-1l-8.6-4.91C43.45,34.84,42.44,34.26,42.45,32.88Z" transform="translate(-6.91 -8.82)"/><path class="cls-1" d="M37.14,29.89a4,4,0,0,1-2.94-.64q-1.17-.73-2.4-1.38a3.52,3.52,0,0,1-1.89-2.18,3.12,3.12,0,0,1,1.28-3.4,3.21,3.21,0,0,1,3.73,0c.8.48,1.59,1,2.42,1.39a3.37,3.37,0,0,1,2.13,3.18A3.24,3.24,0,0,1,37.14,29.89Z" transform="translate(-6.91 -8.82)"/></svg>
</div>
</a>
</div>
<div class="heart-icon">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 66.5 52.39"><defs><style>.cls-1{fill:#ed4b4b;}</style></defs><title>Charity _ 04</title><path class="cls-1" d="M72.6,50c-1.58-1.19-3.66-.43-4.35-.18-2.36.86-9.38,3.71-10.61,4.19a1.34,1.34,0,0,0,1,2.5c1.24-.49,8.23-3.33,10.55-4.17,1.31-.47,1.72-.27,1.82-.2a.61.61,0,0,1,.09.75,1.45,1.45,0,0,1-.45.44C66,55.85,49.45,64.94,49.45,64.94c-2.63,1.45-5.61,1.68-9.4.73-3.1-.78-18.69-5.37-19.28-5.54l-1.67-.47,0,1.73c0,.3,0,.61,0,.92,0,.11,0,.18,0,.2a.76.76,0,0,1-.21,0h-.41c-.79,0-1.54.06-2.28.05a37.29,37.29,0,0,1-5.51-14.85c-.14-1-.24-2-.34-3.06v0c2-.07,5.81-.17,8-.22a1.42,1.42,0,0,1,.29,0,1.79,1.79,0,0,1,0,.23l.06,2.38L20,47c.91,0,1.82-.06,2.72-.09,4.07-.15,7.92-.3,11.68.91a20.9,20.9,0,0,1,3.17,1.4,15.26,15.26,0,0,0,5,1.83,58.84,58.84,0,0,0,9,.75,1.7,1.7,0,0,1,1.29.47,1.62,1.62,0,0,1-1,2.71h-.06c-1.65.08-13.85.36-13.85.36a1.34,1.34,0,0,0-1.31,1.37h0A1.32,1.32,0,0,0,38,58.05h0s12.22-.28,13.91-.36a4.29,4.29,0,0,0,2.86-7.29,4.42,4.42,0,0,0-3.23-1.25A53,53,0,0,1,43,48.43a12.86,12.86,0,0,1-4.19-1.56,22.34,22.34,0,0,0-3.58-1.57c-4.21-1.35-8.47-1.19-12.6-1l-1.35.05a2.69,2.69,0,0,0-2.8-2.59l-.23,0c-2.52.06-9.14.24-9.54.27l-1.37.11.14,1.37c0,.49.1,1,.14,1.45.1,1,.2,2.12.36,3.18a40,40,0,0,0,6,16.12,2.39,2.39,0,0,0,1.84,1c.91,0,1.81,0,2.68,0h.4a2.71,2.71,0,0,0,2.71-2c.56.16,14.6,4.29,17.75,5.09a19.71,19.71,0,0,0,4.83.64,13.18,13.18,0,0,0,6.51-1.62S67.28,58.2,71.92,55.63a4.11,4.11,0,0,0,1.35-1.24A3.27,3.27,0,0,0,72.6,50Z" transform="translate(-7.36 -16.52)"/><path class="cls-1" d="M41.2,43.86l.35.3a1.34,1.34,0,1,0,1.74-2L43,41.84A27.53,27.53,0,0,1,37.57,36a12.6,12.6,0,0,1-2.16-6.56,10.83,10.83,0,0,1,2.28-6.94,8.44,8.44,0,0,1,5.89-3.17,9.42,9.42,0,0,1,8.31,3.21L53,23.73l1-1.26a8.61,8.61,0,0,1,6.78-3.26h.4a8.58,8.58,0,0,1,6.66,2.85,10.22,10.22,0,0,1,2.33,5,11.37,11.37,0,0,1-2,8.75,29.62,29.62,0,0,1-6.09,6.55,47.28,47.28,0,0,1-4.71,3.52,1.34,1.34,0,0,0,1.47,2.24,49.52,49.52,0,0,0,5-3.7,31.87,31.87,0,0,0,6.59-7.12,14,14,0,0,0,2.39-10.75,12.81,12.81,0,0,0-3-6.27,11.19,11.19,0,0,0-8.63-3.71h-.44a11.46,11.46,0,0,0-7.83,3.16A12.27,12.27,0,0,0,51,18.31a12.66,12.66,0,0,0-7.68-1.67,11.07,11.07,0,0,0-7.77,4.2,13.48,13.48,0,0,0-2.84,8.68,15.29,15.29,0,0,0,2.59,7.93A30.1,30.1,0,0,0,41.2,43.86Z" transform="translate(-7.36 -16.52)"/></svg>
</div>
<svg class="svg-cross-line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360" height="175" viewBox="0 0 360 175">
<defs>
<clipPath>
<rect data-name="Rectangle 17280" width="360" height="175" transform="translate(-7195 -16953)" fill="#43bc75" stroke="#43bc75" stroke-width="1"/>
</clipPath>
</defs>
<g data-name="Mask Group 90" transform="translate(7195 16953)" clip-path="url(#clip-path)">
<g data-name="Group 20619" transform="translate(-7177.892 -17346.27) rotate(45)">
<path data-name="Path 28907" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21264.018)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28908" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21284.727)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28909" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21305.436)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28910" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21326.145)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28911" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21346.854)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28912" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21367.561)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28913" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21388.27)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28914" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21408.979)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28915" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21429.688)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28916" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21450.395)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28917" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21471.104)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28918" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21491.813)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28919" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21512.521)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28920" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21533.23)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28921" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21553.938)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28922" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21574.646)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28923" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21595.355)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28924" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21616.064)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28925" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21636.773)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28926" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21657.482)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28927" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21678.191)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28928" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21698.9)" fill="none" stroke="#43bc75" stroke-width="2"/>
<path data-name="Path 28929" d="M-10244.453-21264.018h1035.433" transform="translate(10244.453 21719.607)" fill="none" stroke="#43bc75" stroke-width="2"/>
</g>
</g>
</svg>
</div>
</div>
</div>
</section>