Due to the large size of most video files inserting video into WordPress via the media library can be difficult. Not impossible, but difficult and annoying. There are other ways to do this which are not only easier but allow for more customization.
And while I don’t know about or use any myself I’m sure there are plugins that will enhance the video capabilities of WordPress.
As always I endeavour to keep things as simple and light-weight as possible. Here are two ways to insert and customize videos that don’t require additional plugins.
Inserting video using HTML 5
In this case you have uploaded the video to your server, or you could be grabbing the video from another website. You simply need access to the video.
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
This video is inserted using HTML 5
The code looks like this:
<div style="display: flex; justify-content: center; align-items: center;"> <div><video controls width="640" height="360"> <source src="http://wordpressartandscience.com/video/Dynomite and Blades.mp4" type="video/mp4" /> Your browser does not support the video tag. </video></div> </div>
For advanced information on HTML5 video support and supported attributes go here:
http://www.w3schools.com/html/html5_video.asp
Inserting video with the Weaver Xtreme theme.
If you are using the Weaver X theme there are built in shortcodes to make things easier and customizable.
The following information is taken from the Weaver X help file. There may be updates to this information, so check your Weaver X help file for the latest information.
Also check to see if your shortcodes have ‘wvrx_’ enabled or not. The use of ‘wvrx_’ prevents the Weaver shortcodes from interfering with any shortcodes from other plugins. If you do not, the the shortcode you should use will be the given code without ‘wvrx_’ at the beginning.
Weaver X Theme Support supports specialized shortcodes to display video.
While there are other ways to embed video, the Weaver X Theme Support versions have two important features. First, they will auto adjust to the width of your content, including the mobile view. Second, they use the latest iframe/HTML5 interface provided by YouTube and Vimeo.
Vimeo – [wvrx_vimeo] – Display video from Vimeo responsively, with options
[wvrx_vimeo vimeo-url id=videoid sd=0 percent=100 center=1 color=#hex autoplay=0 loop=0 portrait=1 title=1 byline=1]
YouTube – [wvrx_youtube] – Display video from YouTube responsively, with options
[wvrx_youtube youtube-url id=videoid sd=0 percent=100 center=1 rel=0 privacy=0 see_help_for_others]
Specifying Video Display Size for both shortcodes
Weaver X Theme Support supports a common set of options for both the YouTube and Vimeo shortcodes to support displaying your videos with a specific width and correct height.
By default, your videos will be displayed using the full width of the content area being used (percent=100). The percent= parameter is used to specify the width you want.
The height of the video is automatically determined based on the width and the display ratio of the particular video.
Finally, you may specify if the video should be centered or not within the display area using “center=0” to not center (centering is on by default).
Note – if you want to display more than one video horizontally, use “center=0” and specify an appropriate percentage to fit all the videos.
Parameters in Common
percent=100 – By default, the video will be sized to fill the full content space. You can use the percent value to make the video use a percentage of the content space (but mobile will always use full width).
center=1 – Specify ‘center=0’ to disable centering of the video.
sd=0 – By default, Weaver X Theme Support will generate sizes for HD/widescreen videos. To display old 4:3 standard definition videos, include ‘sd=1’ in the shortcode.
Vimeo
[wvrx_vimeo vimeo-url id=videoid sd=0 percent=100 center=1 color=#hex autoplay=0 loop=0 portrait=1 title=1 byline=1]
This will display Vimeo videos. At the minimum, you can provide the standard link, or just the video ID number (which is part of the Vimeo Link). The other Vimeo specific options include:
color – You can optionally specify a Vimeo color theme using 6 hex digits for a color value.
autoplay – Add ‘autoplay=1’ to have the video autoplay.
loop – Add ‘loop=1’ to have the video loop.
portrait, title, byline – You can specify a value ‘=0’ for these to hide the display of the corresponding element on the Vimeo player. Portrait is the avatar/icon, title is the video title, and byline is source attribution.
YouTube
[wvrx_youtube youtube-url id=videoid sd=0 percent=100 center=1 rel=1 https=0 privacy=0 {youtube options}]
This will display YouTube videos. At the minimum, you can provide the standard share link (including the options YouTube lets you specify), the long format share link, or just the video ID number using the id=videoid parameter (which is part of the YouTube Link). The other YouTube specific options include:
rel – If you specify ‘rel=0’, YouTube won’t show related videos after the video plays.
https – If you specify ‘https=1’, YouTube will use the https protocol.
privacy – If you specify ‘privacy=1’, YouTube won’t used cookies to track your viewing.
In addition to the above No share or id values provided for youtube shortcode. options, the shortcode also supports most standard YouTube options. These are more fully described on the YouTube Embedded Player Parameters page.
The supported options, with Weaver X Theme Support’s default values include:
‘autohide’ = ‘1’ . . . . . . 0: always show controls; 1: autohide controls; 2: autohide progress bar
‘autoplay’ = ‘0’ . . . . . . 1: auto play; 0: don’t
‘border’ = ‘0’ . . . . . . . . 0: no border; 1: border using color1 and color2 (don’t seem to work)
‘color’ = not set . . . . . . progress bar color – red or white
‘color1’ = not set . . . . . RGB hex value for border color
‘color2’ = not set . . . . . RGB hex value for control bar bg
‘controls’ = ‘1’ . . . . . . . 0: hide player controls
‘disablekb’ = ‘0’ . . . . . . 1: disable keyboard controls
‘egm’ =’0′ . . . . . . . . . . . 1: enable “Enhanced Genie Menu”
‘hd’ = ‘0’ . . . . . . . . . . . . 1: enable HD playback by default
‘iv_load_policy’ = ‘1’ . . . 1: show annotations; 3: don’t show; 2: discontinued support
‘loop’ = ‘0’ . . . . . . . . . . . 1: loop video
‘modestbranding’ = ‘0’ . .1: hide YouTube logo – will still show label in upper right corner
‘origin’ = not set . . . . . . . See YouTube docs
‘playlist’ = not set . . . . . . Comma separated list of videoIDs to play (id/url video played 1st)
‘showinfo’ = ‘1’ . . . . . . . 0: hide video title
‘showsearch’ = ‘1’ . . . . . 0: hide video searchbox
‘start’ = not set . . . . . . . start vide this number of seconds from start
‘theme’ = ‘dark’ . . . . . . . dark or light – display theme for player
‘wmode’ = ‘transparent’ . Keeps video behind menu bars, etc. Other values available – see YouTube