Update May 18, 2016 – I have stopped using jwplayer, I don’t want to be hosting the raw mp4 files on my site, I didn’t find that jwplayer adapted well when changing screen resolutions, and it was hard on mobile users.  I’m back to YouTube, and I couldn’t be happier.

One of the coolest plugins I’ve found as I’ve tried to add video to the family blog is jwplayer (site, wordpress plugin).  It allowed me to stop publishing family videos to youtube, but rather host them myself.  I want to show you how to customize this plugin so that your blog looks great.

Sizes

The plugin allows you to create specific ratios for your videos, so you can show square players (1:1) for your instagram videos, and 16:9 players for you HD videos.  With these ratios, you can create sizes that fit with what you are writing.  More and more, I see myself capturing moments, rather than events, and it’s cool to put bits that add to your writing.

Align Left / Align Right / Align Center

As you shift from writing a post about a video to adding video to your posts; you will want to format your clips to fit with your writing.  If you google “jw player align right” or left or center for that matter, there is very few real information.  The top results are forums, with no real definitive answers.

So here is my How-To:

1.- Check CSS Support

More than likely your wordpress site already has support for this, but JW Player is not very friendly in doing it straight away.  Basically, if you can set an image to be right or left justified, you can do this.  If you don’t add this to your CSS Editor (Appearance -> Edit CSS):

/*
	WordPress Standard Tags
*/

.aligncenter {
	display:block;
	margin:20px auto;
}

.alignleft {
	float:left;
	margin:10px 20px 10px 0;
}

.alignright {
	float:right;
	margin:10px 0 10px 20px;
}

2.- JW Player Tag

Now add your text and insert your player.  It will look something like this:

Debora hizo la masa temprano y luego la dejó enfriando y para la tarde estaba todo listo para hacer las galletas. [jwplayer player="2" mediaid="1803"] Luego le llevaron galletas a algunos vecinos. Las galletas estaban deliciosas, aunque las que decoró Nicole no dejó que nadie las tocara.

It doesn’t matter if the formatting is wrong, we will fix that.

3.- Putting it all together

Now switch from visual view to text view and add DIV tags with the styling around the player tag.  It should look like this:

Debora hizo la masa temprano y luego la dejó enfriando y para la tarde estaba todo listo para hacer las galletas. <div class="alignright">[jwplayer player="2" mediaid="1803"]</div> Luego le llevaron galletas a algunos vecinos. Las galletas estaban deliciosas, aunque las que decoró Nicole no dejó que nadie las tocara.

End Result

Now, instead of having this:

You will have this:

Happy Blogging