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
- Choose from one of eight thumbnail sizes
- Implement programmatically or via HTML5
data-
attributes
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
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 });
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.
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. |
useFitVids | Call FitVids.js on .pretty-embed instances once the video(s) is/are loaded. |
- 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
- 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
- Initial Release
Thanks to the contributors and suggestions from around the web
Thanks to alexanderdickson for waitForImages, which this plugin leverages for dynamic image previews.