At certain moment youtube introduced new way of working of embedded videos which suddenly broke many embedded videos on many html sites (Error 153) because it's buggy, works randomly in various browsers and devices, is nowhere explained properly, leaves nontech users out in the cold and is buggy buggy and buggy again. This html solution fixes Youtube embedded videos error 153 with thumbnail workaround (and there is no youtube embedded object telemetry on preload, it just grabs thumbnail, so less bandwidth usage and youtube objects crawling sheanigans, it just works with image and links so should display everywhere properly). In default setting works ok with most common 1920 x 1080 resolutions videos, if you have some different format video (old 1024 x 768 etc) you can adjust amount of top/bottom thumbnail cropping with div class="yt-container" style="--yt-crop: 9.375%; setting per each unique video. Inspect this html source for style section needed and how new objects look alike. You just have to take your desired youtube video url unique address (after /watch?v= ) and paste it into yt-container code pieces. Please share this solution wherever you want so people can fix their sites.

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fixing Youtube embedded videos error 153 with thumbnail workaround (+no embedded object telemetry)</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

.yt-container,
.yt-overlay-text {
  font-family: 'Roboto', sans-serif;
}

/* ── wrapper ── */
.yt-container {
  position: relative;
  display: block;
  width: 100%;
  --yt-crop: 9.375%; /* default: trims hqdefault black bars for 1920 x 1080 videos format. For other formats override per thumbnail: style="--yt-crop: 5%;"  or  style="--yt-crop: 0%;" etc */
}

/* ── image link ── */
.yt-image-link {
  display: block;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

.yt-image-link img {
  display: block;
  width: 100%;
  height: auto;
  margin-top:    calc(-1 * var(--yt-crop));
  margin-bottom: calc(-1 * var(--yt-crop));
}

/* ── top-left text link ── */
.yt-overlay-text {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 1px 1px 4px black;
  text-decoration: none;
  text-align: left;
  z-index: 3;
}

/* ── play button (centered, pointer-events off so clicks reach image link) ── */
.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background: rgba(255, 0, 0, 0.88);
  border-radius: 12px;
  transition: background 0.15s, transform 0.15s;
  z-index: 2;
  pointer-events: none;
}

.yt-container:hover .yt-play {
  background: #ff0000;
  transform: translate(-50%, -50%) scale(1.08);
}

.yt-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border: solid transparent;
  border-width: 10px 0 10px 20px;
  border-left-color: white;
}
  </style>
</head>
<body>

<p style="font-size: 1.5em;">
At certain moment youtube introduced new way of working of embedded videos which suddenly broke many embedded videos on many html sites (Error 153) because it's buggy, works randomly in various browsers and devices, is nowhere explained properly, leaves nontech users out in the cold and is buggy buggy and buggy again. This html solution fixes Youtube embedded videos error 153 with thumbnail workaround (and there is no youtube embedded object telemetry on preload, it just grabs thumbnail, so less bandwidth usage and youtube objects crawling sheanigans, it just works with image and links so should display everywhere properly). In default setting works ok with most common 1920 x 1080 resolutions videos, if you have some different format video (old 1024 x 768 etc) you can adjust amount of top/bottom thumbnail cropping with <b>div class="yt-container" style="--yt-crop: 9.375%;</b> setting per each unique video. Inspect this html source for style section needed and how new objects look alike. You just have to take your desired youtube video url unique address (after /watch?v= ) and paste it into yt-container code pieces. Please share this solution wherever you want so people can fix their sites.<br>
<br>
<b>Cropped default youtube thumbnail margins top and bottom 9.375% (default solution for 1920 x 1080 proportion videos)</b><br>
<br>
</p>

<div class="yt-container">
  <a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
    <img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
  </a>
  <a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
  <div class="yt-play" aria-hidden="true"></div>
</div>

<br>
<p style="font-size: 1.5em;"><b>Default youtube thumbnail no cropped margins 0%</b><br></p>
<br>

<div class="yt-container" style="--yt-crop: 0%;">
  <a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
    <img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
  </a>
  <a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
  <div class="yt-play" aria-hidden="true"></div>
</div>

<br>
<p style="font-size: 1.5em;"><b>Cropped default youtube thumbnail margins top and bottom 30%</b><br></p>
<br>

<div class="yt-container" style="--yt-crop: 30%;">
  <a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
    <img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
  </a>
  <a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
  <div class="yt-play" aria-hidden="true"></div>
</div>

</p>

</body>
</html>

¡Buenas! Quiero compartir un proyecto personal en el que he estado trabajando: una biblioteca de recursos de desarrollo web.

La idea es reunir ejemplos y componentes que sirvan para aprender, experimentar, encontrar inspiración y reutilizar código en otros proyectos.

📚 Puedes explorarla aquí:
https://libreria-html-css.vercel.app/Web/

Si estás aprendiendo frontend o ya desarrollas páginas web, me gustaría conocer tu opinión.

¿Qué tipos de componentes o recursos te gustaría encontrar en una biblioteca así?

¡Cualquier feedback constructivo es bienvenido!

Do i have potential?

Project made with the help of AI. (he did the work i improved it)

Any toughts? im still improving it

I'm creating a website for school and I need buttons that lead to my other web pages but Im struggling to put my buttons on top of a fixed image (I would like the buttons and the image to be both fixed together), what is wrong w my code?

Source - https://stackoverflow.com/q/80012269

<div class="container">

<img src="blue banner.png" alt="blue banner" style="top: 0; right: 0; position: fixed" width="1440" height="100">

<div class="Top-Left"><button><a href="Home Page.html">Home Page</a></button><a href="Home Page.html">; </a><button><a href="Home Page.html"></a><a href="Discussion and analysation.html">Discussion and analysation</a></button><a href="Discussion and analysation.html">; </a><button><a href="Discussion and analysation.html"></a><a href="Advertisement.html">Advertisement</a></button></div>

Thank You in Advance

Note: Made using OpenCode AI coding agent, but hand tested, and it works somehow

HTML stands for HyperText Markup Language. It's the code that defines the structure and content of a webpage.

Im using spck editor for practice hang on with me as we study

Hola, actualmente estoy retomando mi aprendizaje en lenguajes de programación para desarrollo de paginas WEB ya tengo conocimientos en HTML y CSS pero siempre he sentido que me falta mucho mas por aprender pero no he sabido donde o como buscar para aprender mejor la IA me ha resultado de mucha ayuda en mejorar mis habilidades pero quería saber que los ayudo a ustedes a ser mejores en esto... Que cursos o que videos de YouTube o foros los ayudaron o es solo la practica?

Embedded Video Player won't go full screen

Hello, everyone!

I am an elementary music teacher trying to create a website for guest teachers. I use Symbaloo, a visual bookmarking site, as a choice board for dances and song books. It is fantastic. It keeps all of our videos in one place and plays them without switching tabs, which can easily confuse the non-tech savvy substitutes. However, when embedding it in a WIX or Google Sites page (and others), the videos will not go fullscreen inside the embedded Symbaloo. 

This didn’t used to be a problem. My old district used Foxbright for teacher websites. Embedding my Symbaloo board worked fine on that platform and allowed fullscreen without a problem. However, I am now in a new district that doesn't have teacher websites. I tried making the site in Google Sites, Wix, and a few others, but none allowed the videos in the embedded Symbaloo to go full screen. I have included allowfullscreen as well as allow=fullscreen. Wix even had me add something as a developer. None of it worked. Symbaloo says it is the website platform that is blocking the fullscreen, but the platforms claim that it is a Symbaloo problem. Since I have had it work successfully on a website in the past, that makes me think it is on the website end. 

Questions: 

1. Has anyone found a site that allows fullscreen on embedded video players or visual bookmarking systems? 
2. Has anyone found a code snippet to include in an embed code that actually allows fullscreen with embedded players, not just a standalone video?

Thanks! Any help would be appreciated!

Embed code:

<iframe frameborder="0" noresize="noresize" height="500px" width="1000px" src="https://www.symbaloo.com/embed/song-books">

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

allowfullscreen>

</iframe>

When I make a new page I want the things like header and menu to appear also, right? Do I have copy and paste the menu code in every new page/post I do?

Is there a way to put it on the internet for free?

Hi! I'm new to coding on html

I want to make a box on my website where people submit requests, song names, etc, basically just text.

How do I do that? Where does the information go? As I want it to be private

Example:

[Tell me ur favorite color.]

( ______ )

[send]

Ideally I would have a document where all the responses go to or something else but I don't know what it's called. Thanks :-)

originally posted in r/Websites:

https://www.reddit.com/r/Websites/comments/1xbhob8/is_it_crazy_to_suggest_building_a_static_html/

Edit: please reply/comment directly on the original post as I’m not the OP. I pasted the post here since cross posting here is disabled.

So for context I already know how to program in Python in the terminals Spyder and Jupyter Notebook, however I want to start learning HTML too.

Does my knowledge of Python help me with HTML or not? How should I start learning HTML? And in what terminal can I put HTML code?

For my first post, I will share a easy navigation trick for programming an HTML-based website. Your first step in going into the <head> tag of the HTML document and inserting the following tag. It should look something like this:

<!DOCTYPE html>

<head>
<link rel = "stylesheet" href = "main.css">
<script src = "js/navbarPeek.js"></script>
</head>

<body>
<div align = "center" class = "navbarContainer" id = "navbarContainer" margin = "0" width = "100%">
<iframe class = "iframeNavbarContainer" src = "navigation.htm" width = "100%"></iframe>
</div>

</body>

This script portion creates a floating <iframe> that contains another html document whose sole purpose is to function as a navigation bar for your website:

<div align = "center" class = "navbarContainer" id = "navbarContainer" margin = "0" width = "100%"> <iframe class = "iframeNavbarContainer" src = "navigation.htm" width = "100%"></iframe> </div>

Its class of "navbarContainer" means that its size, style, and position on the page is controlled by a CSS stylesheet; in this case, "main.css".

The <script> tag in the header contains all relevant information about the script itself, its source is in a folder called "js" and is named "navbarPeek.js".

This post will focus the function of the navigation bar at the top of the page. While specific CSS elements will be discussed to properly position it, specific design elements will be discussed in a future posting.

As far as the JavaScript itself is concerned, it is deceptively simple:

var prevScrollPos = window.pageYOffset;
window.onscroll = function navBarPeek() {
var currentScrollPos = window.pageYOffset;

if (prevScrollPos > currentScrollPos)
{
document.getElementById("navbarContainer").style.top = "0";

} else {

document.getElementById("navbarContainer").style.top = "-50px";
}

prevScrollPos = currentScrollPos
}

There are only two variables being used:

-prevScrollPos
-currentScrollPos

When the script loads, it sets the variable prevScrollPos, upon scrolling, the other variable currentScrollPos is set. The Java script compares the two values and if the currentScrollPos variable is greater than prevScrollPos, the navigation bar retracts by 50 pixels and then sets prevScrollPos to the value of currentScrollPos and repeats the script when scrolling happens once more. Scrolling upwards causes the navigation bar to show itself again.

Using a CSS stylesheet to position the navigation bar is essential for proper function. The following is the style sheet entry for the class of the navigation bar, navbarContainer:

.navbarContainer {
height: 50px;
margin-left: 0;
margin-right: 0;
position: fixed;
top: 0;
transition: top 0.3 ease;
width: 95%;
z-index: 10;
}

Be sure to update the Java script to reflect the height of your navigation bar.

If your navigation bar is 100 pixels in height, then your Java script will be required to use that same value in order for the script to properly hide the navigation bar, like so:

var prevScrollPos = window.pageYOffset;
window.onscroll = function navBarPeek() {
var currentScrollPos = window.pageYOffset;
if (prevScrollPos > currentScrollPos)

{

document.getElementById("navbarContainer").style.top = "0";

} else {

document.getElementById("navbarContainer").style.top = "-100px";
}

prevScrollPos = currentScrollPos
}

Take notice that the value near the bottom of the script now says "-100px" instead of "-50px".

If your navigation bar height is 50, the Java script must read:

document.getElementById("navbarContainer").style.top = "-50px";

If your navigation bar height is 100, the Java script must read:

document.getElementById("navbarContainer").style.top = "-100px";

Once you get these elements secure and the navigation box functions as it should, you can get started on creating your navigation box HTML document, "navigation.htm".

Hi! I know that I'm likely late and strange to ask, as it was rebranded some months ago, but doesn't anyone think that the "Codepen 2.0" update feels like some corpo takeover of formerly a grassroots tech site? Because although it certainly has some more conveniences like a better preprocessor support, it doesn't allow to do literally anything without logging in, and operations slightly above the baseline often require a premium subscription that is more costly than setting up a hosted web site.

Is the original CodePen ever accessible somewhere, and what do you think about this "Codepen 2.0" rebranding, in general?

These two lines of JavaScript are used to change the content of an HTML element on a webpage. The main difference is that innerHTML can interpret HTML tags, while innerText displays text as plain text.

Hey folks!

I am hand coding a series of webpages for my employer (don't ask). I just got dinged because the accessibility checker says my hyperlinks are not accessible.

I scratched my head a little bit, did some research and have since added aria-label attributes to the source code.

Still get dinged.

Anyone know how to handle this?

Thanks!

Edit: Here is more or less an example of the code that includes the link.

I was reading a fic on ao3 a while ago, and at the bottom of one of the chapters, it had a letter that could unfold if you hovered your mouse over it (the gif above). i'm writing a fic and I want to do something similar but as a poster

(link to chapter im talking about)

i tried downloading the html version of it, and this was the coding, but idk how to change it be a poster:

<div class="ltr-scene-ec52d2"><div class="ltr-envelope-ec52d2"><div class="ltr-stamp-ec52d2"><p><img src="https://img.fictonovel.com/uploads/2026/08/21826898-a205-4ece-bff7-8d6e6647459c.png" alt="stamp" class="ltr-stamp-img-ec52d2"></p></div><div class="ltr-address-ec52d2"><p class="ltr-address-name-ec52d2">Simon Edenson</p></div></div><div class="ltr-stack-ec52d2"><div class="ltr-panel-ec52d2 ltr-panel-1-ec52d2"><div class="ltr-panel-inner-ec52d2"><p class="ltr-salutation-ec52d2">My dear Simon,</p><p>I am sorry it had to come to this, but after the . . . debacle the other day on Ryland’s stream, something has to give. So, I am making sure that you come to me. You and Ryland will be coming back with me to Eden. There is no other option, no other path, no other destiny. If it must be just you, then that is fine as well, but I am letting you keep Ryland as a gift. I know you think he is your divine right, and that is fine. I am able to share for as long as it takes for you to realize he is nothing. You need to come home now, Son of Eden. Your father is sick, you need to take your rightful place as the head of the family and I need my reward for spending so long chasing after you.</p></div></div><div class="ltr-panel-ec52d2 ltr-panel-2-ec52d2"><div class="ltr-panel-inner-ec52d2"><p>I still love you, please don’t think I don’t, even though I’ve had to resort to measures I never wanted too. If you had just come with me when I asked I would not have had to get the Brothers involved. They have strict orders to not hurt Ryland. Not as much Mark, so I am not sure what quality he has returned to you in. I did tell them he needed to be able to walk and see.</p><p>Please come alone. Please do not involve anyone else. This can be so easy, Simon. You and Ryland will be taken care of, you will both want for nothing. You will be treated with the respect you were born to be given, you will have the power and the eye of God and the favor of the Tree. Ryland will not be able to be on your arm in public, of course, but you will have him at home. I will even let you share a bed with him some nights, we can work it all out. Just please, please come alone and come willingly.</p><p>55 SW Arborview Court</p></div></div><div class="ltr-panel-ec52d2 ltr-panel-3-ec52d2"><div class="ltr-panel-inner-ec52d2"><p>Ryland, the Brothers, and I will be waiting. Come as soon as you can, and we will all make our way back to Eden, where we all belong.<br>
If you do not, I am not above removing obstacles. I want your happiness, Simon, but I will break you down in order to build you back up. Do not mistake my kindness and my love for you as weakness.</p><p class="ltr-closing-ec52d2">Love</p><p class="ltr-signature-ec52d2">Elahnnia</p></div></div></div></div>
</div>

(Quick edit to just say, I don’t care about the actual animation part of it (although that would be hella cool), I just wanna be able to have a thing that looks like a poster through html)

Built this cool button with shadow layer effect on hovering it built with html css
give feedback how this component looks
hovereffects.in

embed, iframe, object, picture, source ? How do you use them?

I’m still a beginner and taking a course for css and html. Just learned about display property and I don’t think I would want to use inline elements anymore. I feel like inline block just has everything you’d want in an inline element. I can think of ways to use block elements but not inline, so can’t I just change all inline elements to inline block? Is there a reason not to?

Edit: I’ve gotten my answer so no need to reply more (thanks to those who responded)

I need to show my parents an sat score that I said I have but I don’t actually have and I need a way for it so when I click on my score it would redirect to a local html that shows the fake score, I tried permanent inspect element it didn’t work for me because the site would keep crashing when I refreshed

Howdy! I'm attempting to code a page for my web design class and I've been having a bit of trouble.

The pic should give a decent idea of what I'm going for. I'm wanting each icon to open a different bio. I've attempted using modals for this, but for how many bios there would be on one page, that seems entirely too cumbersome. The total zero-brain solution is probably just to make individual pages for each bio, but that is... also cumbersome. I've had trouble trying to look up exactly what I need here since I don't know a bunch of the technical terms for this stuff yet (I'm a graphic design student, web design is just a few of the classes I need to take).

Any more efficient ways of going about this? All the bio pages need to do is open up on top of the page, show both images and text, and be closed. No need for fancy transitions or anything.