Responsive Fixed Video Player<\/title>\r\n\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" crossorigin=\"anonymous\" \/>\r\n<script src=\"https:\/\/kit.fontawesome.com\/2bc0eca35b.js\" crossorigin=\"anonymous\"><\/script>\r\n <style>\r\n \r\n \r\n\r\n .video-container {\r\n position: relative;\r\n width: 100%;\r\n height: 85vh;\r\n \r\n }\r\n\r\n video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n \r\n display: block;\r\n }\r\n\r\n .controls {\r\n position: absolute;\r\n bottom: 20px;\r\n left: 20px;\r\n display: flex;\r\n gap: 20px;\r\n flex-wrap: nowrap;\r\n z-index: 10;\r\n align-items: center;\r\n }\r\n\r\n .controls div {\r\n font-size: 32px;\r\n color: white;\r\n cursor: pointer;\r\n \r\n \r\n width: 50px;\r\n height: 50px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: background 0.3s;\r\n }\r\n\r\n \r\n\r\n @media (max-width: 780px) {\r\n .controls {\r\n bottom: 10px;\r\n left: 10px;\r\n gap: 15px;\r\n }\r\n\r\n .controls div {\r\n font-size: 22px;\r\n width: 40px;\r\n height: 40px;\r\n }\r\n \r\n .video-container {\r\n position: relative;\r\n width: 100%;\r\n height: auto;\r\n margin: auto;\r\n }\r\n\r\n video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n \r\n display: block;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"video-container\">\r\n <video autoplay loop muted id=\"video\" src=\"https:\/\/static.spotapps.co\/website_videos\/Bs_Brew_Works_Vimeo720p.mp4\"><\/video>\r\n\r\n <div class=\"controls\">\r\n <div id=\"playPauseBtn\"><i class=\"fa-solid fa-pause\"><\/i><\/div>\r\n <div id=\"muteBtn\"><i class=\"fa-solid fa-volume-xmark\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const video = document.getElementById('video');\r\n const playPauseBtn = document.getElementById('playPauseBtn');\r\n const muteBtn = document.getElementById('muteBtn');\r\n const playPauseIcon = playPauseBtn.querySelector('i');\r\n const muteIcon = muteBtn.querySelector('i');\r\n\r\n function setIcon(iconElement, newClass) {\r\n iconElement.className = newClass;\r\n }\r\n\r\n playPauseBtn.addEventListener('click', () => {\r\n if (video.paused) {\r\n video.play();\r\n setIcon(playPauseIcon, \r\n 'fa-solid fa-pause');\r\n } else {\r\n video.pause();\r\n setIcon(playPauseIcon, \r\n 'fa-solid fa-play');\r\n }\r\n });\r\n\r\n muteBtn.addEventListener('click', () => {\r\n video.muted = !video.muted;\r\n setIcon(muteIcon, video.muted ? 'fa-solid fa-volume-xmark' : 'fa-solid fa-volume-up');\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3fd958b e-flex e-con-boxed e-con e-parent\" data-id=\"3fd958b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-193850c elementor-widget elementor-widget-html\" data-id=\"193850c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Menu with Active Link (JS)<\/title>\r\n <style>\r\n \r\n\r\n .header {\r\n background: #1a1a1a;\r\n padding: 20px 40px;\r\n }\r\n\r\n .nav-menu {\r\n display: flex;\r\n justify-content: center;\r\n gap: 40px;\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n .nav-menu a {\r\n position: relative;\r\n color: white;\r\n text-decoration: none;\r\n font-size: 18px;\r\n padding-bottom: 5px;\r\n transition: color 0.3s;\r\n }\r\n\r\n .nav-menu a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n height: 2px;\r\n width: 0%;\r\n background-color: #00aaff;\r\n transition: width 0.3s ease;\r\n }\r\n\r\n .nav-menu a:hover::after,\r\n .nav-menu a.active::after {\r\n width: 100%;\r\n }\r\n\r\n .nav-menu a:hover {\r\n color: #00aaff;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"header\">\r\n <ul class=\"nav-menu\">\r\n <li><a href=\"#home\" class=\"active\">Home<\/a><\/li>\r\n <li><a href=\"#about\">About<\/a><\/li>\r\n <li><a href=\"#services\">Services<\/a><\/li>\r\n <li><a href=\"#portfolio\">Portfolio<\/a><\/li>\r\n <li><a href=\"#blog\">Blog<\/a><\/li>\r\n <li><a href=\"#contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <script>\r\n const links = document.querySelectorAll('.nav-menu a');\r\n\r\n links.forEach(link => {\r\n link.addEventListener('click', function () {\r\n \/\/ Remove 'active' class from all links\r\n links.forEach(l => l.classList.remove('active'));\r\n \/\/ Add 'active' class to clicked link\r\n this.classList.add('active');\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Responsive Fixed Video Player Menu with Active Link (JS) Home About Services Portfolio Blog Contact<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1202","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/1202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1202"}],"version-history":[{"count":219,"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/1202\/revisions"}],"predecessor-version":[{"id":2379,"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/1202\/revisions\/2379"}],"wp:attachment":[{"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n Responsive Fixed Video Player<\/title>\r\n\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" crossorigin=\"anonymous\" \/>\r\n<script src=\"https:\/\/kit.fontawesome.com\/2bc0eca35b.js\" crossorigin=\"anonymous\"><\/script>\r\n <style>\r\n \r\n \r\n\r\n .video-container {\r\n position: relative;\r\n width: 100%;\r\n height: 85vh;\r\n \r\n }\r\n\r\n video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n \r\n display: block;\r\n }\r\n\r\n .controls {\r\n position: absolute;\r\n bottom: 20px;\r\n left: 20px;\r\n display: flex;\r\n gap: 20px;\r\n flex-wrap: nowrap;\r\n z-index: 10;\r\n align-items: center;\r\n }\r\n\r\n .controls div {\r\n font-size: 32px;\r\n color: white;\r\n cursor: pointer;\r\n \r\n \r\n width: 50px;\r\n height: 50px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: background 0.3s;\r\n }\r\n\r\n \r\n\r\n @media (max-width: 780px) {\r\n .controls {\r\n bottom: 10px;\r\n left: 10px;\r\n gap: 15px;\r\n }\r\n\r\n .controls div {\r\n font-size: 22px;\r\n width: 40px;\r\n height: 40px;\r\n }\r\n \r\n .video-container {\r\n position: relative;\r\n width: 100%;\r\n height: auto;\r\n margin: auto;\r\n }\r\n\r\n video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n \r\n display: block;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"video-container\">\r\n <video autoplay loop muted id=\"video\" src=\"https:\/\/static.spotapps.co\/website_videos\/Bs_Brew_Works_Vimeo720p.mp4\"><\/video>\r\n\r\n <div class=\"controls\">\r\n <div id=\"playPauseBtn\"><i class=\"fa-solid fa-pause\"><\/i><\/div>\r\n <div id=\"muteBtn\"><i class=\"fa-solid fa-volume-xmark\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const video = document.getElementById('video');\r\n const playPauseBtn = document.getElementById('playPauseBtn');\r\n const muteBtn = document.getElementById('muteBtn');\r\n const playPauseIcon = playPauseBtn.querySelector('i');\r\n const muteIcon = muteBtn.querySelector('i');\r\n\r\n function setIcon(iconElement, newClass) {\r\n iconElement.className = newClass;\r\n }\r\n\r\n playPauseBtn.addEventListener('click', () => {\r\n if (video.paused) {\r\n video.play();\r\n setIcon(playPauseIcon, \r\n 'fa-solid fa-pause');\r\n } else {\r\n video.pause();\r\n setIcon(playPauseIcon, \r\n 'fa-solid fa-play');\r\n }\r\n });\r\n\r\n muteBtn.addEventListener('click', () => {\r\n video.muted = !video.muted;\r\n setIcon(muteIcon, video.muted ? 'fa-solid fa-volume-xmark' : 'fa-solid fa-volume-up');\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3fd958b e-flex e-con-boxed e-con e-parent\" data-id=\"3fd958b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-193850c elementor-widget elementor-widget-html\" data-id=\"193850c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Menu with Active Link (JS)<\/title>\r\n <style>\r\n \r\n\r\n .header {\r\n background: #1a1a1a;\r\n padding: 20px 40px;\r\n }\r\n\r\n .nav-menu {\r\n display: flex;\r\n justify-content: center;\r\n gap: 40px;\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n .nav-menu a {\r\n position: relative;\r\n color: white;\r\n text-decoration: none;\r\n font-size: 18px;\r\n padding-bottom: 5px;\r\n transition: color 0.3s;\r\n }\r\n\r\n .nav-menu a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n height: 2px;\r\n width: 0%;\r\n background-color: #00aaff;\r\n transition: width 0.3s ease;\r\n }\r\n\r\n .nav-menu a:hover::after,\r\n .nav-menu a.active::after {\r\n width: 100%;\r\n }\r\n\r\n .nav-menu a:hover {\r\n color: #00aaff;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"header\">\r\n <ul class=\"nav-menu\">\r\n <li><a href=\"#home\" class=\"active\">Home<\/a><\/li>\r\n <li><a href=\"#about\">About<\/a><\/li>\r\n <li><a href=\"#services\">Services<\/a><\/li>\r\n <li><a href=\"#portfolio\">Portfolio<\/a><\/li>\r\n <li><a href=\"#blog\">Blog<\/a><\/li>\r\n <li><a href=\"#contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <script>\r\n const links = document.querySelectorAll('.nav-menu a');\r\n\r\n links.forEach(link => {\r\n link.addEventListener('click', function () {\r\n \/\/ Remove 'active' class from all links\r\n links.forEach(l => l.classList.remove('active'));\r\n \/\/ Add 'active' class to clicked link\r\n this.classList.add('active');\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Responsive Fixed Video Player Menu with Active Link (JS) Home About Services Portfolio Blog Contact<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1202","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/1202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1202"}],"version-history":[{"count":219,"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/1202\/revisions"}],"predecessor-version":[{"id":2379,"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/1202\/revisions\/2379"}],"wp:attachment":[{"href":"https:\/\/test.meerkatblinds.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}