Question 1

How do I use a custom preview image with PrettyEmbed.js?

Accepted Answer

Set the customPreviewImage option in JavaScript or use the data-pe-custompreviewimage attribute in HTML. This overrides default thumbnail sizes, giving you full control over the preview image.

Question 2

Does PrettyEmbed.js work on mobile devices?

Accepted Answer

Yes, it's optimized for mobile by respecting YouTube's autoplay restrictions. However, custom placeholders are disabled on mobile to comply with YouTube's policies, ensuring compatibility.

Question 3

What's the difference between HTML5 and script-driven methods in PrettyEmbed.js?

Accepted Answer

HTML5 method uses data attributes for static configuration, while script-driven uses JavaScript for dynamic setups. Data attributes take precedence, offering flexibility for different use cases.

Question 4

How can I make YouTube embeds responsive with PrettyEmbed.js?

Accepted Answer

Enable the useFitVids option to integrate FitVids.js, which automatically scales videos to fit container widths. This is optional but essential for responsive design.

Question 5

PrettyEmbed.js vs other plugins for YouTube embeds?

Accepted Answer

PrettyEmbed.js excels with high-res previews and dual implementation, but being jQuery-based, it's less modern than vanilla JS alternatives. It's best for jQuery-heavy projects.

Question 6

Can PrettyEmbed.js handle multiple video embeds on one page?

Accepted Answer

Yes, version 1.1.0 improved multiple instance handling to prevent duplicate styles and ensure smooth operation, as noted in the changelog.

Question 7

Why is my preview image showing a gray 'three dots' image?

Accepted Answer

This occurs when YouTube hasn't generated a thumbnail in the selected size. Try a different previewSize or switch to a customPreviewImage, as suggested in the README.

prettyembed.js

What is prettyembed.js?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions