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 Demo on CodePen
Features
- Choose from one of eight thumbnail sizes
- Implement programmatically or via HTML5
data-
attributes
Getting Started
Requirements
There are two methods of implementing PrettyEmbed.js - an HTML5 driven method, and a script driven method.
- Include jQuery
- Include waitForImages
- 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.