Each Youtube video includes a column div with two children: primary and secondary.
https://i.sstatic.net/c4ayc.png
https://i.sstatic.net/8bFf3.png
The primary div contains a 'ytd-comments' element which houses all comments. I attempted to move it to the secondary div, but in doing so, all comment IDs within the 'ytd-comments' div disappeared. As shown below, the content of this div is now empty.
If you're looking to enhance your browsing experience, I suggest trying out Stylus. It's an extension available for Chrome, Firefox, and Opera that allows you to inject custom CSS into web pages. Here is a simple CSS code snippet that can modify the layout of a webpage:
#columns #secondary {
display: none;
}
#columns #primary {
display: block;
padding-left: 24px;
}
#columns #primary > div {
display: block;
position: relative;
}
#columns #primary > div > * {
width: var(--ytd-watch-flexy-player-width);
}
#columns #primary > div > ytd-comments {
position: absolute;
top: -12px;
left: calc(100% + 24px);
max-width: 45vw;
}
[edit]
I must say, the new look after applying these styles is quite refreshing! For those who prefer to keep the #secondary "Up Next" column visible, you can use this modified style:
#columns #primary {
display: block;
padding-left: 24px;
}
#columns #primary > div {
display: block;
position: relative;
}
#columns #primary > div > * {
width: var(--ytd-watch-flexy-player-width);
}
#columns #primary > div > ytd-comments {
position: absolute;
top: -12px;
left: calc(100% + 24px);
max-width: calc(100vw - var(--ytd-watch-flexy-player-width) - (3 * 24px) - 400px);
}
#columns #secondary {
width: 400px; /* Adjust based on preferences */
}
When it comes to asking for a date in an HTML form, I used to utilize various methods: Utilizing 3 separate fields for day, month, and year Using a text field with additional labeling like "Start date (example: 31-12-2013)" Employing a reverse date ...
Seeking a solution to a perplexing dilemma that has left me incapable of finding a swift resolution. Perhaps there is someone here who can provide guidance. I am curious: if I initiate an AJAX request on my HTML page using jQuery and then trigger a refres ...
Looking for a way to dynamically change the color of navigation links based on which section of the page a user is currently viewing? Here's an example setup: <div id="topNav"> <ul> <li><a href="#contact">Contac ...
Struggling with multi-nested rows and columns in Bootstrap 4, I encountered an issue where the line2 was positioned next to line1 instead of below it with a horizontal bar separating them. Can someone help me understand why this is happening? <link h ...
I am relatively new to the React environment and recently created a basic component for a bookmarking feature. Essentially, when the favourite icon is clicked, an ajax call is sent > a record is created in the database > on ajax success, a flash me ...
In the div below, there is a span with the following code: <div class="mission-button"><span class="mission">view our mission</span></div> Accompanied by this CSS: .mission-button::before { content:'&ap ...
I am in the process of incorporating my custom SVG knob icons into an electron application using flexbox. The challenge lies in keeping them centered within the rectangle icon regardless of browser size, as shown here. Ideally, the icons should adjust thei ...
My dilemma is as follows: I have a line within a document that has a set width. Now, there are 3 elements involved - one <a> tag and two <span> tags. The content in the <a> tag varies in width each time it appears on the line. The thi ...
Currently in my vue application, I have a loop set up like this: <div class="grid grid-cols-3 gap-14"> <article-card v-for="(article, index) in articles" :key="index" :content="article" /> </div> ...
When using Bootstrap, I have divided my main page into two grids to enable content to stack vertically in mobile view. However, I am struggling to center the text horizontally and vertically within the grid without aligning the text to the center using the ...
I managed to successfully position the footer at the bottom of the page, but I noticed that when I resize the screen to fit a phone, especially when there is scrolling on the page, the footer moves up! <footer className="footerContainer"> &l ...
As I work on converting a jquery dragable script to plain javascript, I encountered an issue at the insertBefore point. The error message that pops up is: NotFoundError: Node.insertBefore: Child to insert before is not a child of this node. This particula ...
Currently, I am working on creating a blog using Next.js and I am looking for a way to display or hide the Table of Contents (TOC) based on responsiveness requirements. Although I am utilizing Tailwind CSS for styling, I am experiencing slow reactions. I ...
Could someone please explain to me why when I test this code on Google Chrome using the mobile emulator for Galaxy S3, it displays the correct size (640x360), but when I try to load it on my actual Galaxy S5 or any other device, the size is different from ...
const form = document.querySelector("#contact-form"); const feedback = document.querySelector(".feedback"); const patternName = /^[a-z A-Z]{3,25}$/; form.addEventListener("submit", (e) => { e.preventDefault(); const firstn ...
I am currently creating a website using the CodeIgniter framework. One of the features on my site is a view that displays unverified members in a table. Each member has a button next to their name that can be clicked to verify their account. Below is the ...
Currently, I am in the process of developing a WordPress website, I have implemented a form that allows users to make modifications and update the database: Below is the HTML/PHP code snippet: echo '<form class="form-verifdoc" target=&q ...
Here's the problem: I'm encountering a CSS styling issue with the Live Server extension in Visual Studio Code (by ritwickdey). When I launch the live preview, none of my CSS styles are being applied. Although the HTML displays correctly, the CSS ...
I wanted to dive into jQuery and decided to recreate the slick animation from Jay-Z's new album commercials. In these ads, a bar slides left over his name while simultaneously disappearing. I also wanted to add a flashing effect by fading out, fading ...
There seems to be quite a gap between the welcoming message and the main body text. Significant spacing noticed between Title and body ...