Audio Style
<section class="audio-video"> <div class="container"> <div class="audio-video-block"> <h2>Audio Title</h2> <audio controls=""> <source src="../assets/theme/audio/welcome.mp3" type="audio/mpeg"> </audio> </div> </div> </section> Video Style 1
<section class="audio-video dt-section"> <div class="container-fluid"> <div class="audio-video-block"> <div class="video1 video-popup" style="background-image: url(../themes/custom/clear_pro/assets/images/img/elements/video/group-people-working-out-business-plan-office.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;"> <div class="container"> <div class="video-block"> <a class="svg-wrapper" data-fancybox href="https://youtu.be/h1D5IFsUEFc"> <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150"> <g data-name="Group 40433" transform="translate(17816.035 8953.036)"> <rect data-name="Rectangle 151" width="150" height="150" rx="75" transform="translate(-17816.035 -8953.036)" fill="#00a7ff"/> <path d="M237.233,123.073,186.67,152.815V93.33Z" transform="translate(-17945.559 -9001.11)" fill="#fff"/> </g> </svg> </a> <div class="content-wrapper"> <h2>We’ve created a unique business Solutions and Strategy</h2> </div> </div> </div> </div> </div> </div> </section> Video Style 2
<section class="audio-video dt-section"> <div class="container"> <div class="audio-video-block"> <div class="video2 video-popup" style="background-image: url(../themes/custom/clear_pro/assets/images/img/elements/video/14.jpeg);background-position: center;background-repeat: no-repeat;background-size: cover;"> <div class="video-block"> <a class="svg-wrapper" data-fancybox href="https://youtu.be/h1D5IFsUEFc"> <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150"> <g data-name="Group 40433" transform="translate(17816.035 8953.036)"> <rect data-name="Rectangle 151" width="150" height="150" rx="75" transform="translate(-17816.035 -8953.036)" fill="#00a7ff"/> <path d="M237.233,123.073,186.67,152.815V93.33Z" transform="translate(-17945.559 -9001.11)" fill="#fff"/> </g> </svg> </a> </div> </div> </div> </div> </section> Video Style 3
<section class="audio-video dt-section"> <div class="container"> <div class="audio-video-block"> <div class="video3 video-popup" style="background-image: url(../themes/custom/clear_pro/assets/images/img/elements/video/group-people-working-out-business-plan-office.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;"> <div class="video-block"> <a class="svg-wrapper" data-fancybox href="https://youtu.be/h1D5IFsUEFc"> <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150"> <g data-name="Group 40433" transform="translate(17816.035 8953.036)"> <rect data-name="Rectangle 151" width="150" height="150" rx="75" transform="translate(-17816.035 -8953.036)" fill="#00a7ff"/> <path d="M237.233,123.073,186.67,152.815V93.33Z" transform="translate(-17945.559 -9001.11)" fill="#fff"/> </g> </svg> </a> </div> </div> </div> </div> </section> Video Style 4
<section class="audio-video dt-section"> <div class="container-fluid"> <div class="audio-video-block"> <div class="video4 video-popup" style="background-image: url(../themes/custom/clear_pro/assets/images/img/elements/video/13.jpeg);background-position: center;background-repeat: no-repeat;background-size: cover;"> <div class="container"> <div class="video-block"> <a class="svg-wrapper" data-fancybox href="https://youtu.be/h1D5IFsUEFc"> <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150"> <g data-name="Group 40433" transform="translate(17816.035 8953.036)"> <rect data-name="Rectangle 151" width="150" height="150" rx="75" transform="translate(-17816.035 -8953.036)" fill="#00a7ff"/> <path d="M237.233,123.073,186.67,152.815V93.33Z" transform="translate(-17945.559 -9001.11)" fill="#fff"/> </g> </svg> </a> <div class="content-wrapper"> <h2>Excepteur sint occaecat cupidatatear non proident sunt</h2> </div> </div> </div> </div> </div> </div> </section>