PrettyEmbed.js

Prettier embeds for your YouTubes - with nice options like high-res preview images, advanced customization of embed options, and optional FitVids support.

PrettyEmbed.js on GitHub

PrettyEmbed.js Demo on CodePen

Features

• Choose from one of eight thumbnail sizes
• Implement programmatically or via HTML5 data- attributes

Getting Started

Requirements

• jQuery
• waitForImages

There are two methods of implementing PrettyEmbed.js - an HTML5 driven method, and a script driven method.

1. Include jQuery
2. Include waitForImages
3. On the document.ready() event, call the plugin

HTML5 Driven Application

Form embeds by attaching the class of .pretty-embed, as well as any other required data-pe- options.

<div class="pretty-embed" data-pe-videoid="aBcDeFg12345" data-pe-fitvids="true"></div>

Call the plugin

$().prettyEmbed({ useFitVids: true });

Script Driven

Create an HTML placeholder, such as this:

<div id="my-video-display"></div>

Call the plugin on the placeholder element:

$('#my-video-display').prettyEmbed({
	videoID: 'aBcDeFg12345',
	previewSize: 'hd',				// use either this option...
	customPreviewImage: '',			// ...or this option

	// Embed controls
	showInfo: false,
	showControls: true,
	loop: false,

	colorScheme: 'dark',
	showRelated: false,

	useFitVids: true
});

Note that html5 data-pe- attributes will take precedence over the options called programmatically. E.g. data-pe-videoid="aBcDeFg1234" takes precedence over options.videoID: '1234GfEdCbA'.

Also Note that if a particular preview image size is loading a generic gray "three dots" image, YouTube might not have generated a thumbnail in this size. Try a different size.

Options

Name | Description ---- | ----------- videoID | The video ID of the YouTube video. This option will be ignored if the data-videoid attribute is present. (E.g.: aBcDeFg12345) previewSize | Preview image size pulled from YouTube. This option will be ignored if the customPreviewImage attribute is present. Available sizes from smallest to largest: thumb-default, thumb-1, thumb-2, thumb-3, default, medium, high, hd (default) customPreviewImage | Custom defined preview image URL. This option overrides options.previewSize. showInfo | Display video information (top bar). showControls | Display YouTube player controls. loop | Play video as a loop. closedCaptions | Displays closed captions (if available). localization | Changes the localization. Accepts an ISO 639-1 two-letter language code. colorScheme | Display YouTube player user interface. showRelated | Display YouTube related videos on video end. allowFullScreen | Defaults to true, can be set to false to disable the viewer from viewing in fullscreen mode. useFitVids | Call FitVids.js on .pretty-embed instances once the video(s) is/are loaded.

Changelog

v1.2.1

• Fixed mobile player bug
• New option: allowFullScreen which can be used to turn off fullscreen viewing mode

v1.2.0

• Fixed those annoying "black bars" that would show up on the sides of the video once playing
• Fixed an issue which would cause HTML5 data-pe- attributes to break
• Removed the background-color from .pretty-embed, because be more flexible, ya know?
• New option: closedCaptions to turn on closed captions (if available)
• New option: localization which accepts an ISO 639-1 two-letter language code

v1.1.0

• Better multiple instance handling
• Fixed duplicate appended styles on multiple instances
• Better handling of mobile - this means that placeholders are not custom on mobile since YouTube does not allow for autoplay=1 on mobile devices (boooo)
• Added option to choose preview image size pulled from YouTube
• Removed use of deprecated .selector property, which allowed for further minification and a cleaner application of the embedded CSS
• Fixed ugly default border on YouTube embeds
• Improved documentation

v1.0.0

• Initial Release

Thanks

Thanks to the contributors and suggestions from around the web.

Thanks to alexanderdickson for waitForImages, which this plugin leverages for dynamic image previews.

Author

Mike Zarandona | @mikezarandona