我如何显示所有 YouTube 视频并默认展开其说明？

Question

我认为策展人脚本决定了 CSS 大小，但我无法做到恰到好处。

在此 jsfiddle 中，您将看到：
https://jsfiddle.net/supplement/fmjrvsze/1/

直接在网站上看可能更方便：
https://www.mailmyprescriptions.com

在显示内容的地方，顶部的两个 YouTube 视频有 Read more 按钮，底部的两个完全展开。

我希望页面上的所有四个（即使您使用 Next 按钮时也是如此）完全展开并且根本没有 Read more 按钮。

我试过将 padding-top 从 4em 调整到 0em 并且几乎正确，但仍然有一点透明的雾霾。

.crt-post-v2.crt-post-max-height .crt-post-max-height-read-more {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding-bottom: 0.5em;
    padding-top: 4em;
    margin: 0em;
    background: transparent;
    background: -webkit-gradient(left top, left bottom, color-stop(0%, transparent), color-stop(50%, #efefef));
    background: linear-gradient(to bottom, transparent 0%, #efefef 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);
}

不要再做太多的前端或移动开发，所以我们将不胜感激任何和所有的帮助。请帮忙

我希望它们看起来都像这样：

Answer 1

我想你所要做的就是删除那个 display:block；然后将新的 max-height 设置为合适的值。 600px 左右

Answer 2

有一个内联 max-height:316px 样式，这是造成这种情况的原因。

这是完整的解决方案。查看下面的代码笔。

https://codepen.io/onejeet/pen/NEMxVe

$('.crt-post-c').css('max-height','500px');

$('.crt-post-read-more-button').css('display','none');
$('.crt-post-max-height-read-more').css('background','none');

Answer 3

您必须更改 CSS 中的以下值：max-height 和 min-height 具有 class .crt-post-c 和 [=14= 的所有元素的值] 具有 class .crt-post-max-height-read-more 的所有元素的值如下所示：

var crtPosts = document.querySelectorAll('.crt-post-c'),
    crtPostsReadMore = document.querySelectorAll('.crt-post-max-height-read-more');

for(var i = crtPosts.length; i--;)
{
    crtPosts[i].style.maxHeight = '800px';
    crtPosts[i].style.minHeight = '400px';
}
for(var i = crtPostsReadMore.length; i--;)
    crtPostsReadMore[i].style.display = 'none';

这里是CodePen。希望这就是你想要的。

我如何显示所有 YouTube 视频并默认展开其说明？

How can I show all YouTube videos with their descriptions expanded by default?

html

javascript

css

mobile

stylesheet