Html 重新设置Youtube DOM元素的样式以改善体验

每个Youtube视频都有一个列div，该列有两个子元素，分别为primary和secondary：

主div有一个子“ytd comments”元素，该元素包含所有注释，我想将其放在次div中，但每当我在次div中剪切粘贴“ytd comments”元素时，“ytd comments”div中的所有注释ID都会丢失，请参见下面的内容div为空

---

我建议安装Stylus–Chrome、Firefox和Opera的一个扩展，它将CSS注入页面，然后使用以下CSS代码：

#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;
}

[编辑]

哇，我真的很喜欢这个新造型。如果您想将

#secondary

保持在下一列的上方，这里有一个样式：

---

最好提供一些代码来演示您到目前为止所做的工作。您好，代码（在这种情况下是HTML）是文本，请不要在问题中添加文本图片（）。

#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; /* 400px in the max-width above */
}