A simple fast free user interface placeholder-ui plugin.

Placeholder UI is a Image or Video placeholder user interface plugin. Placeholder UI is one-dependency module placeholder-ui dependent on Snizzle CSS selector Javascript engine. Placeholder UI that set default placeholder of all elements image/video of empty src. Placehlder UI in multiple features available like background, text color, cutom text, size preview and more.

• 🙏🏻 Follow on Github
• 🔖 Releases
• ⬇️ Install
• 📚 Examples
• 📖 Documentation
• 🚀 CDN links
• 🌐 Browsers support

# install locally (recommended)
npm install placeholder-ui --save

Below are some of the most common ways to include placeholder-ui.

<!--Implement Snizzle CSS selector engine libraray in head section (Recomended)-->
<script src="https://cdn.jsdelivr.net/npm/snizzle/dist/snizzle-min.js"></script>

<!-- Implement placeholder-ui plugin from cdn link or your download destination -->
<script src="https://cdn.jsdelivr.net/npm/placeholder-ui/plugin/placeholder-ui-min.js"></script>

placeholder(Object options)

Parameters options: A placeholder Object {}

<!-- for image placeholder required image in [data-sizes] attribute -->
<img src="" alt="" data-sizes="200x300">
<!-- for video placeholder required video in [data-text] attribute -->
<video src="" data-text="Example Text"></video>

placeholder.set({
  background: "#677cbb",  // Placeholder background (optional)
  color: "#fff",          // Placholder text color (optional)
  sizePreview: true,      // true/false true for incling size preview (optinal)
  fontFamily: "Arial",    // Custom font-family (optinal)
  fontSize: 20,           // Custom font-size (optinal)
  fontWeight: 900,        // Custom font-weight (optinal)
  fontStyle: "normal"     // Custom font-style italic/oblique/normal (optinal)
});

• Github link
• CDN link

• Chrome 16+
• Edge 12+
• Firefox 3.6+
• Internet Explorer 7+1
• Opera 11.6+
• Safari 4.0+

¹Workarounds for Internet Explorer 6 are still in the code but the browser is no longer actively tested.

• Android 2.3+
• iOS 5.1+

To report a bug in any of these browsers, please add an issue with a test case from jsfiddle or jsbin.

HTML Code

<img src="" alt="Placeholder UI" data-sizes="222x333">

Javascript Code

placeholder.set({
  sizePreview: true,
  fontFamily: "monospace"
});

Preview:

Javascript Code

placeholder.set({
  background: "dark",
  sizePreview: true,
  color: "#ddd",
  fontFamily: "monospace"
});

Preview:

Javascript Code

placeholder.set({
  background: "#677cbb",
  color: "#fff",
  sizePreview: true,
  fontFamily: "Arial",
  fontSize: 20,	
  fontWeight: 900,
  fontStyle: "normal"
});

Preview:

HTML Code

<video src="" data-text="Shahzada Modassir\nVideo frame">

Javascript Code

placeholder.set({
  background: "#555555",
  fontWeight: 900,
  fontSize: 20,
  color: "#eeeeee",
  fontStyle: "italic"
});

Preview: