how can i resize my videos to half the default (500 pixels) size?

  • i changed the value in the box, clicked save, and as long as i’m on the customization page, they are resized. when i reboot the site, click into the same post, they’re back to the default size.

    any help would be appreciated. i forgot to add that i didn’t put any css code into the main box numbered 1-14, not knowing what ot add in any event.

    The blog I need help with is: (visible only to logged in users)

  • Sure. Could you give me the urls of some specific posts with images that you’re concerned about? The homepage images are displaying at 50%, so point me in the direction of the default images.

  • as i’m on the customization page, they are resized

    What page would that be? Please post the URL.

  • Oops! CSS thread – sorry. Ignore me please.

  • any of them, really. i hadn’t even noticed that the box i’d filled in with 290 or even other sorta half-sizes was meant for either images or videos, sorry.

    i’d like to have the vids half size, and had wondered why my image size editing worked in the edit box, but not when published.

    can i control both? most important is the video size, if not. at firedoglake (wordpress) an image can be resized easily, but they may have signed up for extraordinary customization. i know they use an outside server, for instance.

    but say this post:

    how many friends do we really have? the NSA does the math for us now!

    what i saw when i looked into the css appearance customization seemed to indicate that the youtubes embedded in comments were smaller as well, but when i tried some test runs, they were back to the default width of 500 pixels.

    do i need to past in code into the numbered box, delete the instructions? sorry to be so inept at this stuff.

  • it’s been six days since i provided the above information, and i haven’t gotten any information from you.

    i am still at least slightly hopeful that you might be able to help me out.

    thanks,
    wendy davis

  • Hi Wendy, You can set some options for YouTube videos if you insert the videos using the shortcode method. See the YouTube support page under “Video Options” for more information. As an example, here would be the short code to set the width of the video on the page you reference to 250px.

    [youtube=http://www.youtube.com/watch?v=HfqmLsht36A&w=250]

  • thank you, sacredpath.

    your suggestion is to resize them for each diary we post, then? and i assume i use that code in the text tab.

    but is it easy enough to resize all videos in the css customization window?

    i do have a mentor that could help me if you could tell me which code to enter where in that css video/image change box (i think that’s what it was called…)

  • You could add this to your CSS, but that would mean that all YouTube videos in your site would be 250px wide. By doing it on a video by video basis, you leave yourself the option of making some of them wider. Note that this covers YouTube videos only. Videos inserted from other sources would require separate CSS solutions, and some videos may be difficult to resize. Most WordPress.com supported video types though support some sort of shortcode resizing.

    .embed-youtube iframe {
        width: 250px;
        height: auto;
    }
  • thanks again, thesacredpath. i tried the css code (i used a 300 value, actually), but i failed at it. should i use the first period before the word ’embed’?

    two other questions: if i can succeed in changing the style sheet this way, will the videos embedded in the comments also resize? (hope so)

    also, *if* i took the step of allowing a more tech knowledgeable member to be an administrator in order to effect the changes, is there any way to take away that designation later? i’ve already told him that i’d only want that designation to be temporary. he understands…

  • Yes, you have to include the period before it since embed-youtube is a CSS “class”. With the period in front of the selector, the code works.

    Yes, I just checked and the youtubes in comments use the same class, so they will resize as well.

    Yes, you can make a (very) trusted person an admin to help you with changes, and you can always demote them back to perhaps a editor, author or contributor later, or you can even delete them from the site by going to Users > All Users and clicking on their username in the list.

    You can read more on user roles and adding, deleting and changing user roles here: http://en.support.wordpress.com/user-roles/ .

  • thank you so much, thesacredpath. i’ll keep working at it, perhaps with a little help from my friend.

    (i’ve been having a lot of computer and wifi glitches, which is why i am so long between responses.)

  • Wendy, you are welcome not a problem, and be sure and let us know if you have any further questions or problems.

  • er…i have more questions…

    i tried one last time to change the css myself before giving my friend admin privileges, and lo and behold, the Save button lit up, and the videos changed size. i went with 325 to see if that would look right. (slightly wider will suit a bit better…)

    what happened is that they may be 320 pixels wide, but not tall enough to be proportional. squashed, as it were.

    i did a test post to show you:

    http://cafe-babylon.net/2013/10/13/test-video/

    i don’t remember if you ever answered my question about needing to fill in the black box that says ‘pixels’ on the right…

    but this is the youtube url:

    and this is the code i pasted in…

    .embed-youtube iframe {
    width: 325px;
    height: auto;
    }

    is there a need to provide for proportional height somehow?

    thanks.

  • Wendy, let’s back up and do this on a video by video basis.

    Remove the css I gave you and go to the video page you reference. Click on “share” and then click on “embed”. When the embed window opens, in the size pulldown, click “custom” and enter 325 for the width. Copy the iframe embed code there and then paste that into the “Text” tab in the post where you want the video. When you click back to the visual tab, you will see the yellow box indicating the video. Click back on the Text tab and you should see the 325 width there and the proper height (from youtube. Preview the post and it should be at 325px in width with the proper proportion. That is what I did on one of my text blogs here, http://intheoutbox.wordpress.com/2013/10/13/video-sizing-test-coraline/, where you can see the result.

  • yes, that looks very proportioanl, thesacredpath. and i do know how to do them one by one now. at firedoglake’s version of wordpress, this code suffices, and is easy to tweak to desired size. it doesn’t work at my site, of course.

    [embed height="320"]http://www.youtube.com/watch?v=DayCrQWJXuI[/embed]

    two things still underlie my desire to change the css, though. one is that there will be other diarists coming, and i’d hate to have to resize all their videos, and i’d prefer the ones in the comments section to be smaller, as well. what decided me on choosing wordpress, and buying an upgrade was the ability to embed videos in comments. we are, as a rule, a musical bunch. ;~)

    now if you need me to go study some of the css learning sites to see if i can figure out how to proceed with what i’d like to accomplish in the customization, that’s fine, or at least close to fine, and in the meantime i’ll just resize the ones in the original posts.

    do let me know, please. and thank you for your help so far.

  • Wendy, I’ll work on this some more and see if I can come up with a CSS solution. I have a lot of talented colleagues I can call on too.

  • well, i would certainly be grateful, thesacredpath. as you can tell, i’m starting from zero experience with any of this css tweak stuff. ;~)

    if it gets to be too much trouble, let me know, and i’ll look further abroad.

    wd

  • Is the end goal to make the videos 50% of the size of their container element? If so, the following CSS example to adjust embedded YouTube or Vimeo video sizes may do the trick, can you give it a try?

    .embed-vimeo,
    .embed-youtube {
    	width: 50%;
    }
    .embed-vimeo iframe,
    .embed-youtube iframe {
    	height: auto;
    }

    Note that adding custom CSS like this may override individual video settings, but it sounds like that’s what you wanted to do.

  • hey, designsimply. the half size (50%) was too small, so i changed the width value to 70%, but i didn’t do anything with the grey box in the big black box area.

    anyhoo, both were still too short, like this:

    http://cafe-babylon.net/2013/10/15/test-4/

    i tried to figure out the ratios with ruler measurements, lol, but i couldn’t even do that. don’t know how pixels relate to rulers. ;~)

  • The topic ‘how can i resize my videos to half the default (500 pixels) size?’ is closed to new replies.