Additional formatting for the YouTube & Vimeo shortcodes
Xtreme has two Shortcodes to display YouTube or Vimeo Videos.
The shortcodes have a few options, below are some additional styling possibilities for them
First make sure you read the User Guide article on these shortcodes
Wrapping text and aligning left or right.
When using a width less than the default 100%, the video shortcodes only have two options.
Centered (default), or left aligned (center=0) and without wrapping of any text coming after the video
If you wish for the text to wrap around, do the following
- Do not set the percent option in the shortcode
- Add the rule below in the Global Custom CSS Rule Box
- Replace xxx by the page ID #, using the percentage you like, and either left or right
.page-id-xxx .wvrx-video {width:50%;float:right;}
Using a maximum width instead of a percentage.
Sometimes you may want to set a maximum width in pixel instead of a %. The benefit being that the video never gets too big, but when the browser gets smaller, it does not get too small either.
To do that:
- Do not set the percent option in the shortcode
- Add the rule below in the Global Custom CSS Rule Box
.page-id-xxx .wvrx-video {max-width:500px;}
Changing the ratio of the Video container
If you want to force a ratio different than the default, you can use the rule below (example for 4:3 = 75%)
.page-id-xxx .fluid-width-video-wrapper {width:75%;}
Notes:
- If you have the “Plus” Plugin, you can put the rules in the Per Page Style Box, without the .page-id-xxx selector
- In many cases, you can do away with the shortcode, and simply use the YouTube embed link like below (replace xxxxx by the video ID)
https://www.youtube.com/embed/xxxxx
You can then place these in regular divs with the styling you like including weaver Xtreme Columns ones