Videos stretched in Bootstrap collapse panels

  • I’m trying to create a basic Bootstrap accordion/collapse with videos in each panel. For some reason, the videos are being stretched to 100% of the width of the panel and I can’t seem to change this (I want to keep the videos at a max-width of 640px and max-height of 480px).

    I noticed that if a panel is open when the page loads, the video in that panel shows up at the correct size. But if all panels are collapsed when the page loads, as I want them to be, the videos are stretched when the panels are opened.

    Here is a link to the page: https://beverlywillis.com/beta/videos/

    Can anyone see what’s going on here? Thanks so much in advance.

Viewing 2 replies - 1 through 2 (of 2 total)
  • ThemeSumo

    (@themesumo)

    You can add this to your Child Theme style.css file, or using a Custom CSS plugin.

    .panel-body [id*="mep_"] {
    max-width: 640px;
    max-height: 480px;
}

    You can also add a little padding around your videos to align them with your titles, with this:

    .videos .panel-group .panel-heading + .panel-collapse > .panel-body {
    padding: 15px;
}

    Hope this helps.

    • This reply was modified 8 years ago by ThemeSumo.
    Thread Starter zhanna

    (@zhanna)

    That seems to have done it. Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Videos stretched in Bootstrap collapse panels’ is closed to new replies.