Audio & Video

<section class="audio-videos dt-section">
    <div class="audio-style-1">
        <div class="container">
            <h2>Audio Style</h2>
            <audio controls="" controlslist="nodownload">
                <source src="/agency-pro/themes/custom/agency_pro/mp3/bgm.ogg" type="audio/ogg">
                <source src="/agency-pro/themes/custom/agency_pro/mp3/bgm.mp3" type="audio/mpeg">
            </audio>
        </div>  
    </div>
</section>
Copy to clipboard

<section class="audio-videos dt-section">
    <div class="video-style-1">
        <div class="container">
            <h2>Video Style 1</h2>
            <div class="item">
                <img src="/agency-pro/sites/default/files/2022-04/video-img.jpg" alt="Image">
                <div class="overlay">
                    <a data-fancybox="video-gallery" data-src="https://www.youtube.com/watch?v=h1D5IFsUEFc&t=3s" title="Title">
                        <svg xmlns="http://www.w3.org/2000/svg" width="79.016" height="79.015" viewBox="0 0 79.016 79.015">
                            <g id="noun_play_730810" transform="translate(-5 -5)">
                              <g id="Group_203" data-name="Group 203" transform="translate(5 5)">
                                <path id="Path_381" data-name="Path 381" d="M44.508,957.362A39.508,39.508,0,1,0,84.015,996.87a39.548,39.548,0,0,0-39.508-39.508Zm0,5.268a34.24,34.24,0,1,1-34.24,34.24A34.2,34.2,0,0,1,44.508,962.63ZM33.094,979.311v35.118l29.85-17.558Z" transform="translate(-5 -957.362)" fill="#fff"/>
                              </g>
                            </g>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
Copy to clipboard

<div class="video-style-2">
    <div class="container">
        <h2>Video Style 2</h2>
        <div class="item">
            <div class="image">
                <img src="/agency-pro/sites/default/files/2022-04/image_0.jpg" alt="Image">
                <div class="overlay">
                    <a data-fancybox="video-gallery" data-src="https://www.youtube.com/watch?v=h1D5IFsUEFc&t=3s" title="Title">
                        <svg xmlns="http://www.w3.org/2000/svg" width="101.415" height="101.415" viewBox="0 0 101.415 101.415">
                            <g transform="translate(6196 -5173)">
                            <g data-name="Rectangle 1269" transform="translate(-6195 5174)" fill="#fff" stroke="#707070" stroke-width="1">
                                <rect width="100.327" height="100.327" rx="50.163" stroke="none"></rect>
                                <rect x="0.5" y="0.5" width="99.327" height="99.327" rx="49.663" fill="none"></rect>
                            </g>
                            <path d="M54.083,3.375A50.708,50.708,0,1,0,104.79,54.083,50.7,50.7,0,0,0,54.083,3.375ZM74.512,55.033,41.064,75.268a1.085,1.085,0,0,1-1.633-.951V33.848a1.08,1.08,0,0,1,1.633-.951L74.512,53.132A1.118,1.118,0,0,1,74.512,55.033Z" transform="translate(-6199.375 5169.625)" fill="#f93b50"></path>
                            </g>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
Copy to clipboard

<div class="video-style-3">
    <div class="container">
        <h2>Video Style 3</h2>
    </div>
    <div class="container-fluid p-0">
        <div class="item dt-section" style="background-image: url('/sites/default/files/2022-04/video-img.jpg');">
            <div class="item-content">
                <div class="content">
                    <h2>Best Digital Agency,<br>Creative People.</h2>
                    <div class="icon">
                        <a data-fancybox="video-gallery" data-src="https://www.youtube.com/watch?v=h1D5IFsUEFc&t=3s" title="Title">
                            <svg xmlns="http://www.w3.org/2000/svg" width="79.016" height="79.015" viewBox="0 0 79.016 79.015">
                                <g id="noun_play_730810" transform="translate(-5 -5)">
                                <g id="Group_203" data-name="Group 203" transform="translate(5 5)">
                                    <path id="Path_381" data-name="Path 381" d="M44.508,957.362A39.508,39.508,0,1,0,84.015,996.87a39.548,39.548,0,0,0-39.508-39.508Zm0,5.268a34.24,34.24,0,1,1-34.24,34.24A34.2,34.2,0,0,1,44.508,962.63ZM33.094,979.311v35.118l29.85-17.558Z" transform="translate(-5 -957.362)" fill="#fff"></path>
                                </g>
                                </g>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Copy to clipboard