diva punk: tv player tutorial

I will soon add all my tutorials on one page; for now, enjoy making your own TV networks!

First, I have to give credit to the websites I used to make this.

https://www.w3schools.com/html/html5_video.asp
https://uploadcare.com/blog/how-to-create-a-custom-video-player-in-javascript/

I also used Reddit, but for the life of me I can't find the exact thread I used. Search terms that should help you are "video player html code" and "tv maker code"

1. Create a new Page

2. Change your view to "HTML view"

3. You want to add this code to your page

<style>

/* ================================

DIVAPUNK HALLOWEEN TV

================================ */

#divapunk-tv-page {

--orange: #e87519;

--pumpkin: #ff8a1c;

--burgundy: #641b27;

--cream: #f4dfb4;

--black: #100c0d;

--pink: #d94b79;

min-height: 100vh;

margin: 0;

padding: 45px 20px 70px;

box-sizing: border-box;

background:

radial-gradient(circle at 20% 20%, rgba(232,117,25,.12) 0 2px, transparent 3px),

radial-gradient(circle at 80% 70%, rgba(217,75,121,.10) 0 2px, transparent 3px),

#100c0d;

background-size: 35px 35px, 50px 50px;

color: var(--cream);

font-family: Georgia, "Times New Roman", serif;

text-align: center;

}

/* TITLE */

.divapunk-tv-title {

margin-bottom: 8px;

color: var(--pumpkin);

font-family: Georgia, "Times New Roman", serif;

font-size: clamp(38px, 7vw, 76px);

font-weight: bold;

letter-spacing: 7px;

text-transform: uppercase;

text-shadow:

3px 3px 0 var(--burgundy),

0 0 15px rgba(255,138,28,.35);

}

.divapunk-tv-subtitle {

margin-bottom: 35px;

color: var(--cream);

font-size: 15px;

letter-spacing: 5px;

text-transform: uppercase;

}

/* LITTLE HALLOWEEN DECOR */

.divapunk-decor {

margin: 12px auto 20px;

color: var(--orange);

font-size: 24px;

letter-spacing: 15px;

}

/* TV AREA */

.divapunk-tv-wrapper {

position: relative;

width: min(720px, 95%);

margin: 0 auto;

}

/* TV BODY */

.divapunk-tv {

position: relative;

width: 100%;

max-width: 680px;

margin: auto;

padding: 35px 35px 45px;

box-sizing: border-box;

background:

linear-gradient(

145deg,

#f08a24 0%,

#c95717 45%,

#8e321c 100%

);

border: 7px solid #351316;

border-radius: 55px 55px 35px 35px;

box-shadow:

0 15px 0 #351316,

0 25px 45px rgba(0,0,0,.7),

inset 0 0 0 4px rgba(255,255,255,.12);

}

/* TV TOP LABEL */

.divapunk-tv-brand {

margin-bottom: 14px;

color: #2b1114;

font-family: Arial, sans-serif;

font-size: 13px;

font-weight: bold;

letter-spacing: 5px;

}

/* SCREEN */

.divapunk-screen {

position: relative;

width: 78%;

aspect-ratio: 4 / 3;

margin: 0 auto;

overflow: hidden;

background: #050505;

border: 12px solid #241014;

border-radius: 28px;

box-shadow:

inset 0 0 35px rgba(0,0,0,.9),

0 4px 0 rgba(255,255,255,.08);

}

/* YOUTUBE */

.divapunk-screen iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border: 0;

}

/* CRT OVERLAY */

.divapunk-crt {

pointer-events: none;

position: absolute;

inset: 0;

z-index: 5;

background:

repeating-linear-gradient(

to bottom,

rgba(255,255,255,.035) 0px,

rgba(255,255,255,.035) 1px,

transparent 1px,

transparent 4px

);

box-shadow:

inset 0 0 35px rgba(0,0,0,.65);

}

/* TV CONTROLS */

.divapunk-controls {

display: flex;

justify-content: center;

align-items: center;

gap: 12px;

margin-top: 25px;

}

.divapunk-knob {

width: 25px;

height: 25px;

background: #3b141a;

border: 3px solid #1d0b0d;

border-radius: 50%;

box-shadow: inset 2px 2px 3px rgba(255,255,255,.15);

}

.divapunk-knob.big {

width: 35px;

height: 35px;

}

/* ON AIR */

.divapunk-onair {

display: inline-block;

margin-left: 15px;

padding: 5px 9px;

background: #381116;

color: #ff6b72;

border: 2px solid #21090d;

font-family: Arial, sans-serif;

font-size: 9px;

font-weight: bold;

letter-spacing: 2px;

box-shadow: 0 0 8px rgba(255,80,80,.25);

}

/* CHANNEL INFO */

.divapunk-channel {

width: min(680px, 90%);

margin: 35px auto 0;

padding: 14px 20px;

box-sizing: border-box;

background: #241014;

border: 1px solid #8e321c;

color: var(--cream);

font-family: Arial, sans-serif;

font-size: 11px;

letter-spacing: 2px;

text-transform: uppercase;

}

.divapunk-channel span {

color: var(--pumpkin);

}

/* PROGRAM GUIDE */

.divapunk-guide-title {

margin: 55px auto 20px;

color: var(--pumpkin);

font-size: 22px;

letter-spacing: 4px;

text-transform: uppercase;

}

.divapunk-guide {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 12px;

width: min(750px, 95%);

margin: auto;

}

/* VIDEO BUTTONS */

.divapunk-video-button {

cursor: pointer;

min-height: 100px;

padding: 18px 12px;

box-sizing: border-box;

background: #241014;

border: 2px solid #71301e;

color: var(--cream);

font-family: Georgia, serif;

transition:

transform .2s ease,

background .2s ease,

border-color .2s ease;

}

.divapunk-video-button:hover {

transform: translateY(-5px);

background: #461820;

border-color: var(--pumpkin);

}

.divapunk-video-number {

display: block;

margin-bottom: 8px;

color: var(--pink);

font-family: Arial, sans-serif;

font-size: 10px;

letter-spacing: 2px;

}

.divapunk-video-name {

font-size: 15px;

font-weight: bold;

}

/* FOOTER */

.divapunk-footer {

margin-top: 55px;

color: #a87569;

font-family: Arial, sans-serif;

font-size: 10px;

letter-spacing: 3px;

text-transform: uppercase;

}

.divapunk-footer strong {

color: var(--pumpkin);

}

/* MOBILE */

@media screen and (max-width: 600px) {

#divapunk-tv-page {

padding: 30px 10px 50px;

}

.divapunk-tv-title {

letter-spacing: 3px;

}

.divapunk-tv {

padding: 22px 15px 30px;

border-radius: 35px 35px 25px 25px;

}

.divapunk-screen {

width: 90%;

border-width: 7px;

}

.divapunk-guide {

grid-template-columns: 1fr;

}

.divapunk-controls {

margin-top: 18px;

}

</style>

✦ ☾ ✦ 🕷 ✦ ☾ ✦

</div>

DivaPunk TV

</div>

Halloween After Dark

</div>

DIVAPUNK

</div>

<iframe

id="divapunk-youtube"

src="https://www.youtube.com/embed/VIDEO_ID"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowfullscreen>

</iframe>

</div>

● ON AIR

</div>

<span>CHANNEL 13½</span>

  •  

DIVAPUNK NETWORK

  •  

HALLOWEEN 2026

</div>

✦ Tonight on DivaPunk ✦

</div>

<button

class="divapunk-video-button"

onclick="changeDivaPunkVideo('VIDEO_ID_1')">

PROGRAM 01

</span>

Fall Girl Guide

</span>

</button>

<button

class="divapunk-video-button"

onclick="changeDivaPunkVideo('VIDEO_ID_2')">

PROGRAM 02

</span>

Thrifting After Dark

</span>

</button>

<button

class="divapunk-video-button"

onclick="changeDivaPunkVideo('VIDEO_ID_3')">

PROGRAM 03

</span>

DIY

</span>

</button>

<button

class="divapunk-video-button"

onclick="changeDivaPunkVideo('VIDEO_ID_4')">

PROGRAM 04

</span>

Halloween Watchlist

</span>

</button>

<button

class="divapunk-video-button"

onclick="changeDivaPunkVideo('VIDEO_ID_5')">

PROGRAM 05

</span>

Treats For Halloween

</span>

</button>

<button

class="divapunk-video-button"

onclick="changeDivaPunkVideo('VIDEO_ID_6')">

PROGRAM 06

</span>

Coming Soon...

</span>

</button>

</div>

<strong>★ DIVAPUNK TV ★</strong>

Thanks for watching. Stay weird. ♡

</div>

function changeDivaPunkVideo(videoID) {

document.getElementById("divapunk-youtube").src =

"https://www.youtube.com/embed/" + videoID;

}

</script>

3. Customizing

Now I know your page will look like mine, but you have to go through and change the code a little bit to fit your blog. If you have no coding experience at all, I suggest using the website down below.

Changing color and text

FreeCodeCamp has tutorials to change the fonts, colors, and sizing of your TV border. Honestly though, most of the coding is done; you just have to look up colors and fonts that will work for HTML.

You also have to add the URL you want on your TV. The one I'll be using today is "https://youtu.be/DBgGAoXvjy4?si=bw5zyNyBlpkvpDXL"

4. Adding Your YouTube Vids

Find VIDEO_ID

and replace it with your video URL ID: https://youtu.be/DBgGAoXvjy4?si=bw5zyNyBlpkvpDXL

Only the part underlined in red

You will change it To onclick="changeDivaPunkVideo('DBgGAoXvjy4')

Depending on how many videos you have, you'll do this with every Video ID

It's honestly hard for me to explain. If you have any more questions. Please let me know; I'll work on giving more detailed tutorials.

You also want to change src="https://www.youtube.com/embed/VIDEO_ID" to the actual YouTube URL

You will find your src at <iframe

It will look something like this

<iframe

id="divapunk-youtube"

src="https://youtu.be/DBgGAoXvjy4?si=bw5zyNyBlpkvpDXL

tv player tutorial

I will soon add all my tutorials on one page; for now, enjoy making your own TV networks!

First, I have to give credit to the websites I used to make this.

https://www.w3schools.com/html/html5_video.asp
https://uploadcare.com/blog/how-to-create-a-custom-video-player-in-javascript/

I also used Reddit, but for the life of me I can't find the exact thread I used. Search terms that should help you are "video player html code" and "tv maker code"

1. Create a new Page

2. Change your view to "HTML view"

3. You want to add this code to your page

3. Customizing

4. Adding Your YouTube Vids

No comments:

Post a Comment

Featured post

Diva Update

Blog Archive

Report Abuse

tv player tutorial

I will soon add all my tutorials on one page; for now, enjoy making your own TV networks!

First, I have to give credit to the websites I used to make this.

https://www.w3schools.com/html/html5_video.asphttps://uploadcare.com/blog/how-to-create-a-custom-video-player-in-javascript/

I also used Reddit, but for the life of me I can't find the exact thread I used. Search terms that should help you are "video player html code" and "tv maker code"

1. Create a new Page

2. Change your view to "HTML view"

3. You want to add this code to your page

3. Customizing

4. Adding Your YouTube Vids

No comments:

Post a Comment

Featured post

Diva Update

Blog Archive

Report Abuse

https://www.w3schools.com/html/html5_video.asp
https://uploadcare.com/blog/how-to-create-a-custom-video-player-in-javascript/