{"id":3702,"date":"2022-10-08T14:02:58","date_gmt":"2022-10-08T09:02:58","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3702"},"modified":"2022-10-08T14:03:01","modified_gmt":"2022-10-08T09:03:01","slug":"make-a-custom-video-player-using-html5-css3-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/","title":{"rendered":"Make a Custom Video Player using HTML5, CSS3 & JavaScript"},"content":{"rendered":"\n

In this tutorial, I will teach you\u00a0how to create a Custom Video Player<\/strong>\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Custom Video Player is given below.<\/p>\n\n\n\n

You can download the full source code (including a sample video) of this JavaScript Custom Video Player<\/strong> at the end of this article.<\/p>\n\n\n\n

HTML, CSS & JavaScript Custom Video Player Source Code<\/h2>\n\n\n\n

index.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang="en" dir="ltr">\n  <head>\n    <meta charset="utf-8">\n    <title>Custom Video Player JavaScript<\/title>\n    <link rel="stylesheet" href="style.css">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <!-- These 3 links are only for icons -->\n    <link rel="stylesheet" href="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.1.1\/css\/all.min.css">\n    <link rel="stylesheet" href="https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" \/>\n    <link rel="stylesheet" href="https:\/\/fonts.googleapis.com\/icon?family=Material+Icons">\n  <\/head>\n  <body>\n    <div class="container show-controls">\n        <div class="wrapper">\n            <div class="video-timeline">\n                <div class="progress-area">\n                    <span>00:00<\/span>\n                    <div class="progress-bar"><\/div>\n                <\/div>\n            <\/div>\n            <ul class="video-controls">\n                <li class="options left">\n                    <button class="volume"><i class="fa-solid fa-volume-high"><\/i><\/button>\n                    <input type="range" min="0" max="1" step="any">\n                    <div class="video-timer">\n                        <p class="current-time">00:00<\/p>\n                        <p class="separator"> \/ <\/p>\n                        <p class="video-duration">00:00<\/p>\n                    <\/div>\n                <\/li>\n                <li class="options center">\n                    <button class="skip-backward"><i class="fas fa-backward"><\/i><\/button>\n                    <button class="play-pause"><i class="fas fa-play"><\/i><\/button>\n                    <button class="skip-forward"><i class="fas fa-forward"><\/i><\/button>\n                <\/li>\n                <li class="options right">\n                    <div class="playback-content">\n                        <button class="playback-speed"><span class="material-symbols-rounded">slow_motion_video<\/span><\/button>\n                        <ul class="speed-options">\n                            <li data-speed="2">2x<\/li>\n                            <li data-speed="1.5">1.5x<\/li>\n                            <li data-speed="1" class="active">Normal<\/li>\n                            <li data-speed="0.75">0.75x<\/li>\n                            <li data-speed="0.5">0.5x<\/li>\n                        <\/ul>\n                    <\/div>\n                    <button class="pic-in-pic"><span class="material-icons">picture_in_picture_alt<\/span><\/button>\n                    <button class="fullscreen"><i class="fa-solid fa-expand"><\/i><\/button>\n                <\/li>\n            <\/ul>\n        <\/div>\n        <video src="demo-video.mp4"><\/video>\n    <\/div>\n\n    <script src="script.js"><\/script>\n\n  <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
script.js<\/h3>\n\n\n\n
const container = document.querySelector(".container"),\nmainVideo = container.querySelector("video"),\nvideoTimeline = container.querySelector(".video-timeline"),\nprogressBar = container.querySelector(".progress-bar"),\nvolumeBtn = container.querySelector(".volume i"),\nvolumeSlider = container.querySelector(".left input");\ncurrentVidTime = container.querySelector(".current-time"),\nvideoDuration = container.querySelector(".video-duration"),\nskipBackward = container.querySelector(".skip-backward i"),\nskipForward = container.querySelector(".skip-forward i"),\nplayPauseBtn = container.querySelector(".play-pause i"),\nspeedBtn = container.querySelector(".playback-speed span"),\nspeedOptions = container.querySelector(".speed-options"),\npipBtn = container.querySelector(".pic-in-pic span"),\nfullScreenBtn = container.querySelector(".fullscreen i");\nlet timer;\n\nconst hideControls = () => {\n    if(mainVideo.paused) return;\n    timer = setTimeout(() => {\n        container.classList.remove("show-controls");\n    }, 3000);\n}\nhideControls();\n\ncontainer.addEventListener("mousemove", () => {\n    container.classList.add("show-controls");\n    clearTimeout(timer);\n    hideControls();   \n});\n\nconst formatTime = time => {\n    let seconds = Math.floor(time % 60),\n    minutes = Math.floor(time \/ 60) % 60,\n    hours = Math.floor(time \/ 3600);\n\n    seconds = seconds < 10 ? `0${seconds}` : seconds;\n    minutes = minutes < 10 ? `0${minutes}` : minutes;\n    hours = hours < 10 ? `0${hours}` : hours;\n\n    if(hours == 0) {\n        return `${minutes}:${seconds}`\n    }\n    return `${hours}:${minutes}:${seconds}`;\n}\n\nvideoTimeline.addEventListener("mousemove", e => {\n    let timelineWidth = videoTimeline.clientWidth;\n    let offsetX = e.offsetX;\n    let percent = Math.floor((offsetX \/ timelineWidth) * mainVideo.duration);\n    const progressTime = videoTimeline.querySelector("span");\n    offsetX = offsetX < 20 ? 20 : (offsetX > timelineWidth - 20) ? timelineWidth - 20 : offsetX;\n    progressTime.style.left = `${offsetX}px`;\n    progressTime.innerText = formatTime(percent);\n});\n\nvideoTimeline.addEventListener("click", e => {\n    let timelineWidth = videoTimeline.clientWidth;\n    mainVideo.currentTime = (e.offsetX \/ timelineWidth) * mainVideo.duration;\n});\n\nmainVideo.addEventListener("timeupdate", e => {\n    let {currentTime, duration} = e.target;\n    let percent = (currentTime \/ duration) * 100;\n    progressBar.style.width = `${percent}%`;\n    currentVidTime.innerText = formatTime(currentTime);\n});\n\nmainVideo.addEventListener("loadeddata", () => {\n    videoDuration.innerText = formatTime(mainVideo.duration);\n});\n\nconst draggableProgressBar = e => {\n    let timelineWidth = videoTimeline.clientWidth;\n    progressBar.style.width = `${e.offsetX}px`;\n    mainVideo.currentTime = (e.offsetX \/ timelineWidth) * mainVideo.duration;\n    currentVidTime.innerText = formatTime(mainVideo.currentTime);\n}\n\nvolumeBtn.addEventListener("click", () => {\n    if(!volumeBtn.classList.contains("fa-volume-high")) {\n        mainVideo.volume = 0.5;\n        volumeBtn.classList.replace("fa-volume-xmark", "fa-volume-high");\n    } else {\n        mainVideo.volume = 0.0;\n        volumeBtn.classList.replace("fa-volume-high", "fa-volume-xmark");\n    }\n    volumeSlider.value = mainVideo.volume;\n});\n\nvolumeSlider.addEventListener("input", e => {\n    mainVideo.volume = e.target.value;\n    if(e.target.value == 0) {\n        return volumeBtn.classList.replace("fa-volume-high", "fa-volume-xmark");\n    }\n    volumeBtn.classList.replace("fa-volume-xmark", "fa-volume-high");\n});\n\nspeedOptions.querySelectorAll("li").forEach(option => {\n    option.addEventListener("click", () => {\n        mainVideo.playbackRate = option.dataset.speed;\n        speedOptions.querySelector(".active").classList.remove("active");\n        option.classList.add("active");\n    });\n});\n\ndocument.addEventListener("click", e => {\n    if(e.target.tagName !== "SPAN" || e.target.className !== "material-symbols-rounded") {\n        speedOptions.classList.remove("show");\n    }\n});\n\nfullScreenBtn.addEventListener("click", () => {\n    container.classList.toggle("fullscreen");\n    if(document.fullscreenElement) {\n        fullScreenBtn.classList.replace("fa-compress", "fa-expand");\n        return document.exitFullscreen();\n    }\n    fullScreenBtn.classList.replace("fa-expand", "fa-compress");\n    container.requestFullscreen();\n});\n\nspeedBtn.addEventListener("click", () => speedOptions.classList.toggle("show"));\npipBtn.addEventListener("click", () => mainVideo.requestPictureInPicture());\nskipBackward.addEventListener("click", () => mainVideo.currentTime -= 5);\nskipForward.addEventListener("click", () => mainVideo.currentTime += 5);\nmainVideo.addEventListener("play", () => playPauseBtn.classList.replace("fa-play", "fa-pause"));\nmainVideo.addEventListener("pause", () => playPauseBtn.classList.replace("fa-pause", "fa-play"));\nplayPauseBtn.addEventListener("click", () => mainVideo.paused ? mainVideo.play() : mainVideo.pause());\nvideoTimeline.addEventListener("mousedown", () => videoTimeline.addEventListener("mousemove", draggableProgressBar));\ndocument.addEventListener("mouseup", () => videoTimeline.removeEventListener("mousemove", draggableProgressBar));<\/pre><\/div>\n\n\n\n
style.css<\/h3>\n\n\n\n
\/* Import Google font - Poppins *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600&display=swap');\n*{\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: 'Poppins', sans-serif;\n}\nbody{\n  min-height: 100vh;\n  background: #E3F2FD;\n}\nbody, .container, .video-controls, .video-timer, .options{\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.container{\n  width: 98%;\n  user-select: none;\n  overflow: hidden;\n  max-width: 900px;\n  border-radius: 5px;\n  background: #000;\n  aspect-ratio: 16 \/ 9;\n  position: relative;\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n}\n.container.fullscreen{\n  max-width: 100%;\n  width: 100%;\n  height: 100vh;\n  border-radius: 0px;\n}\n.wrapper{\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  opacity: 0;\n  bottom: -15px;\n  transition: all 0.08s ease;\n}\n.container.show-controls .wrapper{\n  opacity: 1;\n  bottom: 0;\n  transition: all 0.13s ease;\n}\n.wrapper::before{\n  content: "";\n  bottom: 0;\n  width: 100%;\n  z-index: -1;\n  position: absolute;\n  height: calc(100% + 35px);\n  pointer-events: none;\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);\n}\n.video-timeline{\n  height: 7px;\n  width: 100%;\n  cursor: pointer;\n}\n.video-timeline .progress-area{\n  height: 3px;\n  position: relative;\n  background: rgba(255, 255, 255, 0.6);\n}\n.progress-area span{\n  position: absolute;\n  left: 50%;\n  top: -25px;\n  font-size: 13px;\n  color: #fff;\n  pointer-events: none;\n  transform: translateX(-50%);\n}\n.progress-area .progress-bar{\n  width: 0%;\n  height: 100%;\n  position: relative;\n  background: #2289ff;\n}\n.progress-bar::before{\n  content: "";\n  right: 0;\n  top: 50%;\n  height: 13px;\n  width: 13px;\n  position: absolute;\n  border-radius: 50%;\n  background: #2289ff;\n  transform: translateY(-50%);\n}\n.progress-bar::before, .progress-area span{\n  display: none;\n}\n.video-timeline:hover .progress-bar::before,\n.video-timeline:hover .progress-area span{\n  display: block;\n}\n.wrapper .video-controls{\n  padding: 5px 20px 10px;\n}\n.video-controls .options{\n  width: 100%;\n}\n.video-controls .options:first-child{\n  justify-content: flex-start;\n}\n.video-controls .options:last-child{\n  justify-content: flex-end;\n}\n.options button{\n  height: 40px;\n  width: 40px;\n  font-size: 19px;\n  border: none;\n  cursor: pointer;\n  background: none;\n  color: #efefef;\n  border-radius: 3px;\n  transition: all 0.3s ease;\n}\n.options button :where(i, span) {\n  height: 100%;\n  width: 100%;\n  line-height: 40px;\n}\n.options button:hover :where(i, span){\n  color: #fff;\n}\n.options button:active :where(i, span){\n  transform: scale(0.9);\n}\n.options button span{\n  font-size: 23px;\n}\n.options input{\n  height: 4px;\n  margin-left: 3px;\n  max-width: 75px;\n  accent-color: #0078FF;\n}\n.options .video-timer{\n  color: #efefef;\n  margin-left: 15px;\n  font-size: 14px;\n}\n.video-timer .separator{\n  margin: 0 5px;\n  font-size: 16px;\n  font-family: "Open sans";\n}\n.playback-content{\n  display: flex;\n  position: relative;\n}\n.playback-content .speed-options{\n  position: absolute;\n  list-style: none;\n  left: -40px;\n  bottom: 40px;\n  width: 95px;\n  overflow: hidden;\n  opacity: 0;\n  border-radius: 4px;\n  pointer-events: none;\n  background: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n  transition: opacity 0.13s ease;\n}\n.playback-content .speed-options.show{\n  opacity: 1;\n  pointer-events: auto;\n}\n.speed-options li{\n  cursor: pointer;\n  color: #000;\n  font-size: 14px;\n  margin: 2px 0;\n  padding: 5px 0 5px 15px;\n  transition: all 0.1s ease;\n}\n.speed-options li:where(:first-child, :last-child){\n  margin: 0px;\n}\n.speed-options li:hover{\n  background: #dfdfdf;\n}\n.speed-options li.active{\n  color: #fff;\n  background: #3e97fd;\n}\n.container video{\n  width: 100%;\n}\n\n@media screen and (max-width: 540px) {\n  .wrapper .video-controls{\n    padding: 3px 10px 7px;\n  }\n  .options input, .progress-area span{\n    display: none!important;\n  }\n  .options button{\n    height: 30px;\n    width: 30px;\n    font-size: 17px;\n  }\n  .options .video-timer{\n    margin-left: 5px;\n  }\n  .video-timer .separator{\n    font-size: 14px;\n    margin: 0 2px;\n  }\n  .options button :where(i, span) {\n    line-height: 30px;\n  }\n  .options button span{\n    font-size: 21px;\n  }\n  .options .video-timer, .progress-area span, .speed-options li{\n    font-size: 12px;\n  }\n  .playback-content .speed-options{\n    width: 75px;\n    left: -30px;\n    bottom: 30px;\n  }\n  .speed-options li{\n    margin: 1px 0;\n    padding: 3px 0 3px 10px;\n  }\n  .right .pic-in-pic{\n    display: none;\n  }\n}<\/pre><\/div>\n\n\n\n
\n\n\n\n
Download Source Code (including a sample video)<\/h2>\n\n\n\n
Important Note:<\/strong> The size of the sample video file is 113 MB because of its high quality. So, please be patient while downloading this source code.<\/p>\n\n\n
Download<\/a><\/p>","protected":false},"excerpt":{"rendered":"
In this tutorial, I will teach you\u00a0how to create a Custom Video Player\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Custom Video Player is given below. You can download the full source code (including a sample video) of this JavaScript Custom Video Player at the end of this article. HTML, CSS … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3704,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3702","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nMake a Custom Video Player using HTML5, CSS3 & JavaScript<\/title>\n<meta name=\"description\" content=\"In this tutorial, I will teach you\u00a0how to create a Custom Video Player\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make a Custom Video Player using HTML5, CSS3 & JavaScript\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will teach you\u00a0how to create a Custom Video Player\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-08T09:02:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-08T09:03:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-Video-Player-in-HTML-CSS-JavaScript-Custom-Video-Player-in-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Make a Custom Video Player using HTML5, CSS3 & JavaScript","description":"In this tutorial, I will teach you\u00a0how to create a Custom Video Player\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Make a Custom Video Player using HTML5, CSS3 & JavaScript","og_description":"In this tutorial, I will teach you\u00a0how to create a Custom Video Player\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript","og_url":"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-10-08T09:02:58+00:00","article_modified_time":"2022-10-08T09:03:01+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-Video-Player-in-HTML-CSS-JavaScript-Custom-Video-Player-in-JavaScript.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Make a Custom Video Player using HTML5, CSS3 & JavaScript","datePublished":"2022-10-08T09:02:58+00:00","dateModified":"2022-10-08T09:03:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/"},"wordCount":112,"commentCount":2,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-Video-Player-in-HTML-CSS-JavaScript-Custom-Video-Player-in-JavaScript.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/","name":"Make a Custom Video Player using HTML5, CSS3 & JavaScript","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-Video-Player-in-HTML-CSS-JavaScript-Custom-Video-Player-in-JavaScript.jpg","datePublished":"2022-10-08T09:02:58+00:00","dateModified":"2022-10-08T09:03:01+00:00","description":"In this tutorial, I will teach you\u00a0how to create a Custom Video Player\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-Video-Player-in-HTML-CSS-JavaScript-Custom-Video-Player-in-JavaScript.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-Video-Player-in-HTML-CSS-JavaScript-Custom-Video-Player-in-JavaScript.jpg","width":880,"height":495,"caption":"Make a Custom Video Player using HTML5, CSS3 & JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/make-a-custom-video-player-using-html5-css3-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Make a Custom Video Player using HTML5, CSS3 & JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3702"}],"version-history":[{"count":1,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3702\/revisions"}],"predecessor-version":[{"id":3703,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3702\/revisions\/3703"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3704"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}