So, you've embedded a video or an image, but it's way too big, and crowds all the other items on your screen - what do you need to do?

You'll be happy to know, the fix is very simple!

Images and embedded video use code telling them the width and height that an image/video should fill. This is done in pixel, which are an absolute measurement, and don't account for varied screen sizes. In order to keep your site looking nice and orderly no matter the device it's viewed on, you'll want to use a width percentage.

Percentages tell the image to take up a certain percentage of the available space.  You'll want to give it a width percentage, not a height percentage, since pages scroll vertically.  A width percentage of 100% means it will take up the entire width of the page - or the space where it is - the sidebar, for example, has it's own dimensions, so an image in the sidebar with a width of 100% would take up 100% of the horizontal space available in the sidebar. If the image is the main focus of your page, 80% tends to look good.  If it's a vertical (portrait) style image, 60% can also be suitable.  40% works well for images surrounded by text.

Keep in mind that sometimes images on the edit screen will appear bigger than they will when viewed on the public site because of the region in which they're located. The sidebar and the footer are good examples of where you may want to use larger percentages, even though you want it to appear small - because the footer and sidebar are already limited in size.

Resize an embedded image

1. Open the dialogue box for the image. You'll need to be on the edit screen where the image is to do this. Double click on the image.
2. In the "width" field, put the appropriate percentage. Include the percentage symbol  %.
3. Backspace whatever appears in the height field. Leave it completely blank.
4. Press "ok" to save the settings. Save your page and view it.  Keep in mind that sometimes images on the edit screen will appear bigger than they will when viewed on the public site because of the region in which they're located.

Note: images uploaded to image fields (think sliders, featured pages, blogs/news, events) have their size and formatting controlled by the theme. They are coded to all display in a similar size format and to crop accordingly so that your site maintains a similar look throughout the pages. picture formatting and cropping should always happen before uploading a photo.

Resize an embedded video

When you embed a video from youtube or vimeo, you are given a code to paste into the "source" view. "Source" is a button in the body text area of any page that allows you to enter text.

Here is an example of an embed code:
<iframe width="854" height="510" src="https://www.youtube.com/embed/-u2Slu5YOdM" frameborder="0" allowfullscreen></iframe>

You can see above that it has a width and a height in pixels. Sometimes the sizes are written in different sections, but they will both be within the <iframe> code.

To resize the player, you'll want to switch the width to a percentage, as seen below.
<iframe width="80%" src="https://www.youtube.com/embed/-u2Slu5YOdM" frameborder="0" allowfullscreen></iframe>

This will collapse the height to a standard height that's quite short.  You can play with the height in pixels accordingly, instead of deleting it. 200 pixels tends to work well, but you can make it large or smaller depending on the space available.  Your video will resize to fit within whatever size player you create, and the watcher should still see the option to go full-screen no matter what.

1. Edit the page with the video
2. Click the "source" button
3. Scroll to the section with the embed code, and make the appropriate adjustments.
4. Click source again, and then save the page.

Do you want to have two images appear side by side?

If you have two images, remember to align one left, and one right. This will keep them next to each other despite their size.

Next, set them image width to a maximum of 50%. Chances are you'll want the images to have a slight space in between them - this means you may want to set each width to something like 48% each, so each image takes up slightly less that half the screen, allowing for a gap in between. 

If you don't align one image left, and one image right (maybe you have 3 images), you can add spaces in between, or add an Hspace (maybe about 3 or 5) to each image to add a gap between each one.  Play with the percentages to allow for the images to all fit with the extra Hspace margin.

For 3 images, 28% for the width for each works well.