Embed AlterEgos Character into WordPress Page or Post.
Since various updates in WordPress (v3.5 /3.6) the embedding of most video types are now supported.
Embed AlterEgos Character into WordPress is now as simple task.
To assist users we have taken a little time to create a tutorial.
1. Upload your AlterEgos asset(s) into the WordPress Media Gallery.
Drag & Drop of Select the AlterEgos Video file and still image (poster image) for your selected AlterEgos composition and upload to your WordPress Site.
You now have the appropriate collateral to embed within your Post or Page.
2. Add the AlteEgos file(s) to your WordPress Post or Page
Click on the Add Media Button on the top left of your Page or Post edit bar.
Change the drop down in the top left to “Video” and you can select the AlterEgos Video Composition you wish to embed, Check that the Attachment Display Settings is set to Embed Media Player
In my example the embedded video short code appears as thus;
video mp4=”http://www.alteregos.com/your-wordpress-directory/wp-content/uploads/2013/05/Kent02_270x280_Medium.mp4″][/video]
You could if you wish save your page and leave it as this… however we can also add a Width, Height, Poster Image, and AutoPlay options.
3. Adding a Width & Height Option.
To avoid the player using the full width of the Page or Post we can confine its heigh and width using the following syntax.
width = 270 height=280
Our Video Embed now looks like this.
video mp4=”http://www.alteregos.com/your-wordpress-directory/wp-content/uploads/2013/05/Kent02_270x280_Medium.mp4″ width = 270 height=280 ][/video]
4. Adding a Poster Image
Firstly select Add Media again. This time we are interested in the Poster Image we will be using, and we need the URL.
When you have selected the image click on the Edit Image link under the image on the right.
On the right hand side you will see File URL, copy this File URL and paste it into the Video Tag we already have using the Poster key.
5. The AlterEgos / WordPress final Embed
video mp4=”http://www.alteregos.com/your-wordpress-directory/wp-content/uploads/2013/05/Kent02_270x280_Medium.mp4″ width = 270 height=280 autoplay=true poster=”http://www.alteregos.com/your-wordpress-directory/wp-content/uploads/2013/09/Virtual-Agent-AlterEgos-HD-Male-Glasses.jpg”
Please note we have removed the first “[” and the final “[/video]” square brackets from the Embed code to in essence break it so we can show you the syntax.
6. Align Video Left and Right to allow text wrapping of your AlterEgos Video.
Using the “Text” Tab at the top right of your Page Post Edit Bar you can modify the HTML directly. Wrap you AlterEgos WordPress Embed code with the following;
p class="alignright"> [Video embed code] </p>
Note we have removed the first “<” less than character from the code this needs to be replaced in your source. You can change the alignright to alignleft if required.
7. Change the look of the player & other resources.
The WordPress video system is based upon the mediaelementjs video player so additional details can be obtained from; http://mediaelementjs.com/
Their original mediaelementjs WordPress plugin page also has invaluable information.
You will find all of the CSS and JS elements that allow you to change the look of the player, be ccareful this requires technical knowledge and is easy to break following mistakes, always take a backup of any files you intend to modify. The files can be found in the wp-includes/js/mediaelement WordPress directory.
Hope this helps.
The AlterEgos Team.
