Change video dimensions in single page

Kastro · February 2015

Hello,

I have a portfolio set to 'grid' and when you click on the thumb it takes you to the single page. Contained in that page is a vimeo video. Unfortunately the dimensions are set to 775x310 and I cant find where to change it.

I'm thinking its in here, but I cant figure it out (base.css)

    img.scale-with-grid,
    #Content img {
        max-width: 100%;
        height: auto;
    }

    .google-map img {
        max-width:none !important;
    }

    iframe {
        max-width: 100%;
    }

I'd like to define the height and width just for iframed video content. help?

Thanks ahead of time.

Albert · February 2015

Hi,

please send us url to page where you got this video and we'll see what can we do for you.

Kastro · February 2015

sure..

or are you speaking about the site url?

http://kastromedia.com/site215/?portfolio=video1-2

Albert · February 2015

Ok. So to increase iframe height, please use below css:

.single-photo-wrapper .image_frame iframe { height: 440px; }

Please notice that this is the only way to increase iframe height in this case.

Kastro · February 2015

Hmm.. not working as expected as I don't see any change..

I did however (temporarily) change:

in Layout.css

.single-photo-wrapper .image_frame { margin-left: 130px; }
to
.single-photo-wrapper .image_frame { margin-left: 130px; width: 640px; height: 320px;}

Which gave me the proper frame around the video. But adding the line you gave me (which is on line 709 didn't help. Nor when I added it in the 'custom CSS'. The video is still the same 'wide' size. I'm trying to remove the letterbox on the sides of the video and this is proportion to the container its in. Meaning, if I could explicitly state w:640 h:320 then it would be fine..

Now I have some other custom CSS that I removed thinking it may have an affect and with it gone, unfortunately, nothing has changed.

I've removed my other css and left just that one line you suggested in there for you to see. Any other suggestions? That is the only thing that's holding me up from launching the site. Please help

Thanks!

Kastro · February 2015

example: http://themes.muffingroup.com/be/model/portfolio-item/abbey-montoya/

See how when you resize, there is only black bars across the top and bottom? I'd like to get that. Starting @ 640x320 though. Then let it scale..

It looks like it has the same menu, just closed instead of always open.

Thanks

Albert · February 2015

We have tested css that we gave you above and works on 100%. Maybe you pasted it in wrong place or you should use it with !important declaration as below:

.single-photo-wrapper .image_frame iframe { height: 440px !important; }

Please notice that each custom css should be pasted in Theme options > Layout > Custom CSS & JS > Custom CSS section and also this section must be our of any mistakes or errors because code under mistake won't work at all.

Kastro · February 2015

Understood. So i would assume the width would be the same? I tried

.single-photo-wrapper .image_frame iframe { height: 320px width:640px !important; }

but it keeps stretching the width past 640.. Is it possible to have the framing similar to that of the be|model single post? That would be ideal.

Thanks again for your patience!

Albert · February 2015

On Be|Model at the top is revolution slider and unfortunately it is not possible to get the same effect. We'll consider this while future updates but at this moment this can not be done.

Kastro · February 2015

Ok I figured a work around and thought I'd offer it for those who may want to do the same.

--

In the muffin builder, add a video item and stretch it so its 1/1. Then modify the dimensions and insert your link.

Scroll down to 'Slider| Show in header' and enable it, just making sure you dont select a slider

--

I made some slight changes to the layout a bit by moving the share buttons above, but other than that it works pretty good on web and on phone as well..

Thanks muffin group for a fantastic product!

Change video dimensions in single page

Comments