Changing size of embedded video post summary

  • Resolved Rice14

    (@rice14)


    8 years, 3 months ago

    Hi,

    I’d like to change the size of the video preview that shows up as a post’s summary.

    You can view my site here. As you can see, on pages that show post summaries, embedded videos are huge. I’d like them to be smaller, and show up next to the post title. If I use Google Chrome’s “inspect element” feature, I can see that videos are assigned the div class “col-md-12”. If I change this value to “col-md-5”, the desired effect is achieved. Please let me know which template file I can edit to make this change permanent, or if there is perhaps another way to make the videos smaller.

    Here are some screenshots of the desired effect, before and after.

    Thanks,
    Sean

Viewing 9 replies - 1 through 9 (of 9 total)
  • hannah

    (@hannahritner)

    Hey,
    In Theme Options > Page/Post Settings set the Blog Post Summary Default to Portrait. Does this work for you?

    Hannah

    You can add this css:

    .postlist .post .col-md-12 > .videofit {
    max-width: 400px;
}

    Kadence Themes

    css can be added in your theme options > advnaced settings.

    Kadence Themes

    Thread Starter Rice14

    (@rice14)

    Well, this is close, the videos are (nearly) the right size now, only issue is they appear above the post title. See here for screenshots

    Thread Starter Rice14

    (@rice14)

    Also, Hannah, this does not work, as I’m not looking to place an image next to the post title, but rather an embedded video.

    hannah

    (@hannahritner)

    Hey Rice14,
    Sorry for the delay! Try adding this css:

    @media (min-width: 768px) {
.archive .col-md-12 {
    width: 50%;
    float: left;
}
}

    Hope it works for you!

    Hannah

    I’m going to suggest this css so that it will align with your image posts:

    @media (min-width: 768px){
.postlist article .row .col-md-12 {
    width: 41.66666667%;
    float: left;
}
.postlist article .row .col-md-12.postcontent {
    width: 58.33333333%;
}
.postlist .col-md-12.postcontent header {
    padding: 10px 0 0;
}

.postlist .col-md-12.postcontent .entry-content {
    padding: 10px 5px;
}
}

    Kadence Themes

    Thread Starter Rice14

    (@rice14)

    The solution from Kadence themes worked perfectly! Thank you! Didn’t change the div class, but looks exactly the way I want it to regardless. Thanks once again!

    For future reference, is there some sort of documentation page where I can learn how to write CSS code like this for Virtue?

    hannah

    (@hannahritner)

    This may be helpful- https://www.kadencethemes.com/chrome-inspect-tool/

    Hannah

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Changing size of embedded video post summary’ is closed to new replies.

Tags