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

Preview:

Description:

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:

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.