Get new jQuery plugins just once a week

×

prettyEmbed-js

FavoriteLoadingAdd to favorites

August 11, 2014

prettyEmbed-js | jQuery plugin for pretty youtube embeds

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

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

Getting Started

Requirements

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

v1.2.0

v1.1.0

v1.0.0

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

PrettyEmbed.js

Created by Mike Zarandona

Download

Example

prettyEmbed-js jQuery plugin

video embeds

prettyEmbed-js

Related posts:

Buzz
VideoBG
Audio Player
prettyEmbed-js jQuery plugin

http://jquer.in/wp-content/uploads/2014/08/prettyEmbed-js.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever