Here's a **completely different type** of iframe implementation - a **"Picture-in-Picture" style floating video player** that can be moved around and resized, but for iframe content:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PiP Style Floating Iframe</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
height: 100vh;
overflow: hidden;
background: #f5f5f5;
}
/* Floating PiP container */
.pip-container {
position: fixed;
bottom: 20px;
right: 20px;
width: 320px;
height: 180px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
overflow: hidden;
z-index: 1000;
transition: all 0.3s ease;
resize: both;
}
/* Make sure iframe fills container */
.pip-iframe {
width: 100%;
height: 100%;
border: none;
background: white;
}
/* PiP header controls */
.pip-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 36px;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
padding: 0 10px;
opacity: 0;
transition: opacity 0.2s;
z-index: 10;
}
.pip-container:hover .pip-header {
opacity: 1;
}
.pip-title {
color: white;
font-size: 12px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pip-controls {
display: flex;
gap: 8px;
}
.pip-btn {
background: none;
border: none;
color: white;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
}
.pip-btn:hover {
opacity: 1;
}
/* Site selector panel */
.sites-panel {
position: fixed;
top: 20px;
right: 20px;
width: 300px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
padding: 15px;
z-index: 1001;
}
.sites-panel h3 {
margin-top: 0;
margin-bottom: 15px;
font-size: 16px;
}
.site-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.site-thumb {
background: #f0f0f0;
border-radius: 4px;
padding: 8px;
cursor: pointer;
transition: background 0.2s;
font-size: 12px;
text-align: center;
}
.site-thumb:hover {
background: #e0e0e0;
}
/* Draggable handle */
.drag-handle {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 20px;
cursor: move;
z-index: 5;
}
/* Close button */
.close-pip {
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
background: rgba(0,0,0,0.5);
color: white;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 11;
opacity: 0;
transition: opacity 0.2s;
}
.pip-container:hover .close-pip {
opacity: 1;
}
</style>
</head>
<body>
<!-- Site selection panel -->
<div class="sites-panel" id="sitesPanel">
<h3>Select a Site</h3>
<div class="site-list" id="siteList">
<!-- Sites will be added by JavaScript -->
</div>
</div>
<!-- Floating PiP container -->
<div class="pip-container" id="pipContainer" style="display: none;">
<div class="drag-handle"></div>
<div class="pip-header">
<div class="pip-title" id="pipTitle">Website Viewer</div>
<div class="pip-controls">
<button class="pip-btn" id="pipPrev">◄</button>
<button class="pip-btn" id="pipNext">►</button>
<button class="pip-btn" id="pipFullscreen">⛶</button>
</div>
</div>
<button class="close-pip" id="closePip">×</button>
<iframe class="pip-iframe" id="pipIframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
<script>
// Sites data
const sites = [
{ url: 'https://advertica13.blogspot.com/', title: 'Advertica 13' },
{ url: 'https://advertica12.blogspot.com/', title: 'Advertica 12' },
{ url: 'https://advertica08.blogspot.com/', title: 'Advertica 08' },
{ url: 'https://advertica07.blogspot.com/', title: 'Advertica 07' },
{ url: 'https://advertica06.blogspot.com/', title: 'Advertica 06' },
{ url: 'https://www.softmod.shop/', title: 'Softmod Shop' }
];
// DOM elements
const sitesPanel = document.getElementById('sitesPanel');
const siteList = document.getElementById('siteList');
const pipContainer = document.getElementById('pipContainer');
const pipIframe = document.getElementById('pipIframe');
const pipTitle = document.getElementById('pipTitle');
const pipPrev = document.getElementById('pipPrev');
const pipNext = document.getElementById('pipNext');
const pipFullscreen = document.getElementById('pipFullscreen');
const closePip = document.getElementById('closePip');
const dragHandle = document.querySelector('.drag-handle');
// State variables
let currentIndex = 0;
let isDragging = false;
let startX, startY, startLeft, startTop;
// Initialize the site selector
function initSiteSelector() {
siteList.innerHTML = '';
sites.forEach((site, index) => {
const thumb = document.createElement('div');
thumb.className = 'site-thumb';
thumb.textContent = site.title;
thumb.addEventListener('click', () => {
currentIndex = index;
loadSite(site.url, site.title);
pipContainer.style.display = 'block';
sitesPanel.style.display = 'none';
});
siteList.appendChild(thumb);
});
}
// Load a site into the PiP
function loadSite(url, title) {
pipIframe.src = url;
pipTitle.textContent = title;
}
// Load next site
function nextSite() {
currentIndex = (currentIndex + 1) % sites.length;
const site = sites[currentIndex];
loadSite(site.url, site.title);
}
// Load previous site
function prevSite() {
currentIndex = (currentIndex - 1 + sites.length) % sites.length;
const site = sites[currentIndex];
loadSite(site.url, site.title);
}
// Toggle fullscreen
function toggleFullscreen() {
if (!document.fullscreenElement) {
pipContainer.requestFullscreen().catch(err => {
console.error(`Error attempting to enable fullscreen: ${err.message}`);
});
} else {
document.exitFullscreen();
}
}
// Setup drag functionality
function setupDrag() {
dragHandle.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
startLeft = pipContainer.offsetLeft;
startTop = pipContainer.offsetTop;
document.addEventListener('mousemove', handleDrag);
document.addEventListener('mouseup', stopDrag);
});
}
function handleDrag(e) {
if (!isDragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
pipContainer.style.left = `${startLeft + dx}px`;
pipContainer.style.top = `${startTop + dy}px`;
}
function stopDrag() {
isDragging = false;
document.removeEventListener('mousemove', handleDrag);
document.removeEventListener('mouseup', stopDrag);
}
// Event listeners
pipPrev.addEventListener('click', prevSite);
pipNext.addEventListener('click', nextSite);
pipFullscreen.addEventListener('click', toggleFullscreen);
closePip.addEventListener('click', () => {
pipContainer.style.display = 'none';
sitesPanel.style.display = 'block';
});
// Initialize
initSiteSelector();
setupDrag();
// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
if (pipContainer.style.display === 'none') return;
if (e.key === 'ArrowRight') {
nextSite();
} else if (e.key === 'ArrowLeft') {
prevSite();
} else if (e.key === 'f') {
toggleFullscreen();
} else if (e.key === 'Escape') {
pipContainer.style.display = 'none';
sitesPanel.style.display = 'block';
}
});
</script>
</body>
</html>
```
### Key Features of This PiP-Style Implementation:
1. **Picture-in-Picture Experience**:
- Resizable floating window that stays on top
- Can be dragged anywhere on screen
- Minimalist design that mimics video PiP players
2. **Site Selection Panel**:
- Clean interface to choose which site to display
- Thumbnail-style buttons for each site
- Returns to selection panel when closed
3. **Interactive Controls**:
- Navigation buttons (previous/next)
- Fullscreen toggle
- Close button
- Keyboard shortcuts (arrows, F for fullscreen, Esc to close)
4. **Hover-Revealing Controls**:
- Header controls fade in when hovered
- Clean default view without UI clutter
5. **Responsive Design**:
- Adjustable size (user can resize)
- Works at different dimensions
- Proper aspect ratio maintenance
6. **Modern UI Elements**:
- Smooth transitions
- Clean shadows and rounded corners
- Proper z-index management
This implementation is ideal for users who want to:
- Keep an eye on multiple sites while working
- Have a persistent but unobtrusive web viewer
- Quickly switch between different content sources
- Maintain a clean workspace with movable/resizable windows
The design is inspired by video picture-in-picture players but adapted for web content viewing. You can easily customize the sites list, colors, and default size to match your specific needs.
