Description
Prettier embeds for your YouTubes - with nice options like high-res preview images, advanced customization of embed options, and optional FitVids support.
prettyembed.js alternatives and similar libraries
Based on the "Video/Audio" category.
Alternatively, view prettyembed.js alternatives based on common mentions on social networks and blogs.
-
mediaelement
HTML5 <audio> or <video> player with support for MP4, WebM, and MP3 as well as HLS, Dash, YouTube, Facebook, SoundCloud and others with a common HTML5 MediaElement API, enabling a consistent UI in all browsers. -
ReactPlayer
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion -
SoundJS
A Javascript library for working with Audio. It provides a consistent API for loading and playing audio on different browsers and devices. Currently supports WebAudio, HTML5 Audio, Cordova / PhoneGap, and a Flash fallback. -
AmplitudeJS
AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you want. No dependencies required. -
ractive-player
Library for interactive videos in React [Moved to: https://github.com/liqvidjs/player] -
ts-audio
:musical_score: ts-audio is an agnostic library that makes it easy to work with AudioContext and create audio playlists in the browser -
jPlayer Jukebox
jPlayer Jukebox is add-on to jPlayer that allows to play media files on the page by scanning all links and adding them to a playlist.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of prettyembed.js or a related project?
README
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.