Having a frustrating issue

[ah26]

I am using Modern Studio Links to demo.

On the right side bar I have a video. I inserted using widget video link/ container. But I want the whole video to fill the white space so it looks smoother. Removing the padding doesn't help.

.sidebar .widget {
background-color: #fff;
border: 2px solid #000;
margin-bottom: 60px;
padding: 40px 40px 30px;

See: photo

Any ideas?

https://my.studiopress.com/themes/modern-studio/#demo-full

[andytc]

Link to site ?

[ah26]

here you go

thanks.

[andytc]

Cool , It's a tricky one because the padding will also affect the widget title that has negative margin-top to pull it down over the actual widget content. If the video needs to be full width and fill the space top to bottom , the widget title won't look very good hanging over the video. You can try the CSS below , but this will change the widget title layout on that widget only (video) to be above the widget itself. Play with it.
We are going to overrule the width of the iFrame to be 100% , if you can you could adjust that inline , but for now , just overrule it as below.

.sidebar .widget_media_video {
  padding: 0;
}

.sidebar .wp-video {
  margin-bottom: 0;
}

.sidebar .widget_media_video .widget-title {
  margin-top: -83px;
}

.sidebar .wp-video-shortcode,.sidebar .wp-video-shortcode iframe  {
  width: 100% !important;
}

.sidebar .mejs-container {
  padding-top: 56.25%;
}

Best I can do ... Hope that helps

[andytc]

EDIT : Leave out this line , not needed.

.sidebar .mejs-container {
  padding-top: 56.25%;
}

[ah26]

Thanks but it didn't do much on my end. Do you think I could just remove that single widget and put a video 265 x 250 which is about the size of the widget. Seems like when I comment of widgets from css file they all get removed.

I really appreciate your help. I'm usually pretty good with this stuff but apparently not anymore.

[andytc]

Didn’t do much

What did it do and what didn’t it do ?

Did you clear your browser cache ?

Where did you place the CSS ?

You could place the code and leave it there so we can take another look

[ah26]

Pretty much stayed the same. Didn't fill the box with video player. 
Dropped in style.css in the widget section.
Code is on site. its a dummy site so can mess with it a bit. 

/* Widgets
---------------------------------------------------------------------------------------------------- */

.widget {
word-wrap: break-word;
}

.widget:last-child {
margin-bottom: 0;
}

.widget ol > li {
list-style-position: inside;
list-style-type: decimal;
padding-left: 20px;
text-indent: -20px;
}

.widget li li {
border: 0;
margin: 0 0 0 30px;
padding: 0;
}

.widget_calendar table {
width: 100%;
}

.widget_calendar td,
.widget_calendar th {
text-align: center;
}

.sidebar .widget_media_video {
    padding: 0;
}

.sidebar .wp-video {
    margin-bottom: 0;
}

.sidebar .widget_media_video .widget-title {
    margin-top: -83px;
}

.sidebar .wp-video-shortcode,.sidebar .wp-video-shortcode iframe  {
    width: 100% !important;
}

[andytc]

Ok , I've checked and the styles aren't showing up in styles.css , so that's the problem.

/* Widgets
---------------------------------------------------------------------------------------------------- */

.widget {
	word-wrap: break-word;
}

.widget:last-child {
	margin-bottom: 0;
}

.widget ol > li {
	list-style-position: inside;
	list-style-type: decimal;
	padding-left: 20px;
	text-indent: -20px;
}

.widget li li {
	border: 0;
	margin: 0 0 0 30px;
	padding: 0;
}

.widget_calendar table {
	width: 100%;
}

.widget_calendar td,
.widget_calendar th {
	text-align: center;
}

Try adding the styles I gave you directly into the custom CSS section in the customiser.

[Anita]

I would target just that one widget. Add this to the Additional CSS box in the Customizer.

#media_video-2 {
    padding: 0;
}

Then see if the video will automatically adjust in size.

---

Love coffee, chocolate and my Bella!

[ah26]

Anita, thanks for the help. getting closer.... that actually worked. just need to fill the top with zero padding... but not sure... see screenshot below.

I entered

#media_video-2 {
padding: 0;
}

It messed up the 'video test' box padding a bit. Now I just need to fix the box padding so it looks like the 'site navigation' box.

[Anita]

Add this too:

#media_video-2 .widget-title.widgettitle {
    display: none;
}

#media_video-2 .wp-video {
    margin-bottom: 0;
}

---

Love coffee, chocolate and my Bella!

[ah26]

Thanks... almost got it. now, what if I want the widget title and box like this

Thanks for the assistance.

[Anita]

There isn't a screen shot.

---

Love coffee, chocolate and my Bella!

[ah26]

sorry about that https://postimg.cc/rzY2BbfT

[Author]

Posts