Device Mockup Web Component: Realistic Phone/Tablet/Laptop Frames

Device Mockup is a customizable web component that renders realistic laptop (Macbook), phone (iPhone), or tablet (iPad) device mockups on the webpage.

It handles images, videos, and even live iframes with support for multiple fallback formats and zero dependencies.

Features:

• Framework-agnostic: Built with vanilla JavaScript using the Custom Elements API.
• Three device types: Laptop (16:9 aspect ratio), phone (9:16 aspect ratio), and tablet (4:3 aspect ratio) with accurate bezel proportions.
• Automatic media detection: Parses file extensions to determine whether to render <img> or <video> elements without manual configuration.
• Progressive enhancement fallbacks: Supports AVIF, WebP, PNG for images and WebM, MP4 for videos with automatic fallback chain.
• Interactive iframe mode: Embeds live websites directly into device screens with automatic viewport scaling (1280×800 for laptop, 375×812 for phone, 768×1024 for tablet).
• Theme-aware rendering: Automatically detects system color scheme preferences via prefers-color-scheme media query or accepts manual theme override.
• Hover state system: Separate media sources for hover states with independent fallback chains and object-fit controls.
• Proportional scaling: Single width or height attribute scales the entire device while maintaining aspect ratios across all internal elements.

How To Use:

1. If you’re working within a project that uses a bundler like Vite or Webpack, install and import the web component with NPM.

# NPM
$ npm install @devmansam/device-mockup

import "@devmansam/device-mockup";

2. Or directly load the web component into your document as follows:

<!-- Local -->
<script src="device-mockup.js" defer></script>

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/gh/DevManSam777/device-mockup@main/device-mockup.js" defer></script>

3. Add the <device-mockup> custom element anywhere in your document.

The component requires three attributes: type, src, and alt. The type attribute accepts "laptop", "phone", or "tablet". The src attribute points to your media file. The component automatically determines whether to render an <img> or <video> element based on the file extension.

Many sites block iframe embedding for security reasons. Test your target URL first.

<device-mockup type="laptop" src="1.mp4" alt="Laptop" width="350"></device-mockup>

<device-mockup type="phone" src="1.jpg" alt="Phone" height="350"></device-mockup>

<device-mockup type="tablet" mode="iframe" href="https://www.wikipedia.org/></device-mockup>

4. Configure the device mockup component with the following HTML attributes:

Attribute	Values	Description
type	laptop, phone, tablet	Device type (required)
src	URL string	Primary media source (required)
fallback	URL string	First fallback media source
fallback-2	URL string	Second fallback media source
hover-src	URL string	Media to show on hover
alt	String	Accessibility description (required)
theme	light, dark, auto	Color theme override
width	Number or string	Set width, height scales automatically
height	Number or string	Set height, width scales automatically
padding	CSS padding value	Screen content padding
fit	cover, contain, fill, none, scale-down	Media fitting behavior
href	URL	Makes device clickable
target	_self, _blank, _parent, _top	Link target behavior
mode	iframe	Display live website in device screen
bezel-color	CSS color	Device frame color
camera-color	CSS color	Camera and notch color
keyboard-color	CSS color	Keyboard and home indicator color
shadow-color	CSS color	Drop shadow color

Alternatives:

• Devices.css: A collection of the most popular desktop and mobile devices (with variable colors & sizes) created using pure HTML and CSS.

FAQ:

Q: Can I use both the width and height attributes simultaneously to create a specific aspect ratio?
A: The component ignores the height attribute when both are present, using only width for scaling. This prevents distortion by maintaining the device’s natural aspect ratio (16:9 for laptop, 9:16 for phone, 4:3 for tablet). If you need to constrain both dimensions, wrap the component in a container with specific width and height, then set the component’s width to 100% using CSS. The container will crop or letterbox the scaled device.

Q: My video doesn’t autoplay in the device mockup. How do I fix this?
A: The component sets autoplay, loop, muted, and playsinline attributes automatically for video elements. If autoplay fails, your browser is blocking it due to autoplay policies (most browsers block unmuted autoplay). The muted attribute should allow autoplay, but some browsers require user interaction before any video plays. Check your browser’s autoplay policy settings or add a play button using custom CSS and JavaScript that calls .play() on the video element inside the Shadow DOM.

Q: Can I use this with React/Vue/Angular?
A: Yes, it works with any framework because it’s a standard web component. Just use it like any other HTML element in your templates.

The post Device Mockup Web Component: Realistic Phone/Tablet/Laptop Frames appeared first on CSS Script.