Mixing
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:
javascript html css mobile stylesheet
edited Nov 23 '18 at 19:03
Bharata
8,07461131
asked Nov 19 '18 at 16:50
Supplement
320620
add a comment |
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:
javascript html css mobile stylesheet
edited Nov 23 '18 at 19:03
Bharata
8,07461131
asked Nov 19 '18 at 16:50
Supplement
320620
Hi @Bharata Please find code in code pen now and thank you for your help. codepen.io/radzikowski/pen/JevGNd
– Supplement
Nov 23 '18 at 17:16
add a comment |
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:
javascript html css mobile stylesheet
edited Nov 23 '18 at 19:03
Bharata
8,07461131
asked Nov 19 '18 at 16:50
Supplement
320620
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:
javascript html css mobile stylesheet
javascript html css mobile stylesheet
edited Nov 23 '18 at 19:03
Bharata
8,07461131
asked Nov 19 '18 at 16:50
Supplement
320620
edited Nov 23 '18 at 19:03
Bharata
8,07461131
asked Nov 19 '18 at 16:50
Supplement
320620
edited Nov 23 '18 at 19:03
Bharata
8,07461131
edited Nov 23 '18 at 19:03
Bharata
8,07461131
edited Nov 23 '18 at 19:03
Bharata
8,07461131
8,07461131
asked Nov 19 '18 at 16:50
Supplement
320620
asked Nov 19 '18 at 16:50
Supplement
320620
asked Nov 19 '18 at 16:50
Supplement
320620
320620
Hi @Bharata Please find code in code pen now and thank you for your help. codepen.io/radzikowski/pen/JevGNd
– Supplement
Nov 23 '18 at 17:16
add a comment |
Hi @Bharata Please find code in code pen now and thank you for your help. codepen.io/radzikowski/pen/JevGNd
– Supplement
Nov 23 '18 at 17:16
Hi @Bharata Please find code in code pen now and thank you for your help. codepen.io/radzikowski/pen/JevGNd
– Supplement
Nov 23 '18 at 17:16
Hi @Bharata Please find code in code pen now and thank you for your help. codepen.io/radzikowski/pen/JevGNd
– Supplement
Nov 23 '18 at 17:16
add a comment |
3 Answers
3
active
oldest
votes
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');
answered Nov 23 '18 at 15:51
OneJeet
952310
add a comment |
I think all you have to do is remove that display:block; and then set a new max-height to whatever is appropriate. 600px or something
answered Nov 20 '18 at 19:28
getData
234
That seemed to work for individual youtube box but not all of them. I need them all to be fully expanded.
– Supplement
Nov 23 '18 at 15:04
add a comment |
You have to change the following values in CSS: max-height and min-height values on all elements with class .crt-post-c and display values on all elements with class .crt-post-max-height-read-more like follows:
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';
Here is the CodePen.
I hope this is what you want.
answered Nov 23 '18 at 18:05
Bharata
8,07461131
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379262%2fhow-can-i-show-all-youtube-videos-with-their-descriptions-expanded-by-default%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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');
answered Nov 23 '18 at 15:51
OneJeet
952310
add a comment |
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');
answered Nov 23 '18 at 15:51
OneJeet
952310
add a comment |
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');
answered Nov 23 '18 at 15:51
OneJeet
952310
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');
answered Nov 23 '18 at 15:51
OneJeet
952310
edited Nov 24 '18 at 5:53
answered Nov 23 '18 at 15:51
OneJeet
952310
answered Nov 23 '18 at 15:51
OneJeet
952310
answered Nov 23 '18 at 15:51
OneJeet
952310
952310
add a comment |
add a comment |
I think all you have to do is remove that display:block; and then set a new max-height to whatever is appropriate. 600px or something
answered Nov 20 '18 at 19:28
getData
234
That seemed to work for individual youtube box but not all of them. I need them all to be fully expanded.
– Supplement
Nov 23 '18 at 15:04
add a comment |
I think all you have to do is remove that display:block; and then set a new max-height to whatever is appropriate. 600px or something
answered Nov 20 '18 at 19:28
getData
234
That seemed to work for individual youtube box but not all of them. I need them all to be fully expanded.
– Supplement
Nov 23 '18 at 15:04
add a comment |
I think all you have to do is remove that display:block; and then set a new max-height to whatever is appropriate. 600px or something
answered Nov 20 '18 at 19:28
getData
234
I think all you have to do is remove that display:block; and then set a new max-height to whatever is appropriate. 600px or something
answered Nov 20 '18 at 19:28
getData
234
answered Nov 20 '18 at 19:28
getData
234
answered Nov 20 '18 at 19:28
getData
234
answered Nov 20 '18 at 19:28
getData
234
234
That seemed to work for individual youtube box but not all of them. I need them all to be fully expanded.
– Supplement
Nov 23 '18 at 15:04
add a comment |
That seemed to work for individual youtube box but not all of them. I need them all to be fully expanded.
– Supplement
Nov 23 '18 at 15:04
That seemed to work for individual youtube box but not all of them. I need them all to be fully expanded.
– Supplement
Nov 23 '18 at 15:04
That seemed to work for individual youtube box but not all of them. I need them all to be fully expanded.
– Supplement
Nov 23 '18 at 15:04
add a comment |
You have to change the following values in CSS: max-height and min-height values on all elements with class .crt-post-c and display values on all elements with class .crt-post-max-height-read-more like follows:
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';
Here is the CodePen.
I hope this is what you want.
answered Nov 23 '18 at 18:05
Bharata
8,07461131
add a comment |
You have to change the following values in CSS: max-height and min-height values on all elements with class .crt-post-c and display values on all elements with class .crt-post-max-height-read-more like follows:
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';
Here is the CodePen.
I hope this is what you want.
answered Nov 23 '18 at 18:05
Bharata
8,07461131
add a comment |
You have to change the following values in CSS: max-height and min-height values on all elements with class .crt-post-c and display values on all elements with class .crt-post-max-height-read-more like follows:
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';
Here is the CodePen.
I hope this is what you want.
answered Nov 23 '18 at 18:05
Bharata
8,07461131
You have to change the following values in CSS: max-height and min-height values on all elements with class .crt-post-c and display values on all elements with class .crt-post-max-height-read-more like follows:
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';
Here is the CodePen.
I hope this is what you want.
answered Nov 23 '18 at 18:05
Bharata
8,07461131
edited Nov 23 '18 at 18:12
answered Nov 23 '18 at 18:05
Bharata
8,07461131
answered Nov 23 '18 at 18:05
Bharata
8,07461131
answered Nov 23 '18 at 18:05
Bharata
8,07461131
8,07461131
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379262%2fhow-can-i-show-all-youtube-videos-with-their-descriptions-expanded-by-default%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Hi @Bharata Please find code in code pen now and thank you for your help. codepen.io/radzikowski/pen/JevGNd
– Supplement
Nov 23 '18 at 17:16