Coding and layouts!

TV CODING ... this is the code i crafted to generate a different video on every visit to the page like a television, as used on this page of mine here. put in the style section of your coding at the top pictures included below for visual help! add as many videos as you want but don't forget the autoplay=1 at the end its imperitive to the coding for some reason. also adjust the setAttribute width and height to your preference. otherwise dont touch the rest of the code for it to work. visual and text instruction on getting the youtube video embed links below. put this part towards the bottom of ur code

< script> var videos = ["https://www.youtube.com/embed/PnpCWsKgbZo?autoplay=1", "https://www.youtube.com/embed/zelKBoUqG4U?autoplay=1"];
window.onload = function () {
var playerDiv = document.getElementById("random_player");
var player = document.createElement("IFRAME");
var randomVideoUrl = videos[Math.floor(Math.random() * videos.length)];
player.setAttribute('width', '560');
player.setAttribute('height', '315');
player.setAttribute('src', randomVideoUrl);

playerDiv.appendChild(player);

};
< /script>

put this wherever you want the tv! for the tv graphic i just make it the container/card background and adjust the height and width in the above code. the "remote" is just an image linked to the same page to refresh it and randomize to a different video like a real tv. you could even just make it a text link if you want.

< div id="random_player">< /div>

select your video on youtube, click share, click embed, copy the embed link specifically up to the question mark, add autoplay=1 at the end

DRAGGABLE BOX CODING ... the code i use for my journal on my about! simple but cool in my opinion. put this in your body section!

< div id="mydiv">
< div id="mydivheader">title< /div>
type whatever here
< /div>

put this in ur style.css !! adjust the box size, position, colors, and border to your liking!!

#mydiv {
position: absolute;
left: 150px;
top: 300px;
overflow-y: scroll;
z-index: 9;
background-color: white;
text-align: center;
border: 5px ridge pink;
width: 270px;
height: 300px;
padding: 15px;
}

#mydivheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: pink;
color: papayawhip;
}

put this towards the bottom of your body code

< script>
//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}

function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}

function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}

function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
< /script>

WINAMP PLAYER ... for this you unfortunately need the premium esque neocities features or the ability to upload a file on whatever hosting website you use! But if thats not a problem upload the winamp skin u want to ur files, you can find some here! you also need to upload an mp3!! just put this towards the bottom of your code like other scripts and adjust the skin, position, and songs to ur liking.

< div style="width:40px; height:40px; position:absolute; bottom:0px; right:0px;">
< div id="winamp-container">< /div>
< script>
const Winamp = window.Webamp;
// All configuration options are optional.
const webamp = new Webamp({
// Optional.
initialTracks: [
{
metaData: {
artist: "Final Fantasy X",
title: "Besaid Islands",
},
url: "besaid.mp3",
},
],
initialSkin: {
url: "/rikku.wsz"
},
});
webamp.renderWhenReady(document.getElementById('winamp-container'));
< /script>
< /div>

this goes into the head section of your code

< script src="https://unpkg.com/webamp@1.4.0/built/webamp.bundle.min.js">< /script>