Как я могу показать все видео YouTube с их описаниями, развернутыми по умолчанию? - PullRequest
Новая
       22

Как я могу показать все видео YouTube с их описаниями, развернутыми по умолчанию?

0 голосов
/ 19 ноября 2018

Я думаю, что скрипт куратора определяет размер 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);
}

Больше не занимайтесь фронтендом или мобильной разработкой, поэтому любая помощь будет принята с благодарностью.Помогите пожалуйста.

Я хочу, чтобы они все выглядели так:

enter image description here

Ответы [ 3 ]

0 голосов
/ 23 ноября 2018

Существует встроенный стиль 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');
0 голосов
/ 23 ноября 2018

Необходимо изменить следующие значения в CSS: значения max-height и min-height для всех элементов с классом .crt-post-c и display значения для всех элементов с классом .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 .Я надеюсь, что это то, что вы хотите.

0 голосов
/ 20 ноября 2018

Я думаю, все, что вам нужно сделать, это удалить этот дисплей: блок; и затем установите новую максимальную высоту на то, что подходит. 600px или что-то

...