Search code examples
javascripthtmlcssmobilestylesheet

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

I think the curator script dictates the CSS size but I can't get it just right.

Here in this jsfiddle you'll see:
https://jsfiddle.net/supplement/fmjrvsze/1/

It may be easier to look at it directly on the website:
https://www.mailmyprescriptions.com

Where it displays the content the top two YouTube videos have the Read more buttons and the bottom two are fully expanded.

I want all four (all even when you use the Next buttons) on the page to be fully expanded and not have the Read more button at all.

I've tried adjusting the padding-top from 4em to 0em and I got it almost correct but there was still a bit of transparent haze.

.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);
}

Don't do much front end or mobile development anymore so any and all help would be greatly appreciated. Help please.

I want them to all look like this:

enter image description here

Solution

  • There is an inline max-height:316px style, which is causing this.

    Here is the complete solution. check out the below codepen.

    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');