Iframe Examples

<iframe src="https://www.example.com" width="600" height="400"></iframe>

<iframe 
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560" 
  height="315"
  title="YouTube video player">
</iframe>

<iframe 
  src="https://maps.google.com/maps?q=New+York"
  width="100%" 
  height="400"
  style="border: none;"
  title="Google Maps - New York">
</iframe>

<iframe 
  src="https://example.com"
  style="
    border: 2px solid #3498db;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 100%;
    height: 400px;
  ">
</iframe>

<!-- HTML -->
<iframe 
  src="https://example.com"
  class="styled-iframe responsive-iframe"
  title="Styled iframe">
</iframe>

<!-- CSS -->
<style>
.styled-iframe {
  border: 3px solid #e74c3c;
  border-radius: 15px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

.styled-iframe:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.responsive-iframe {
  width: 100%;
  max-width: 800px;
  height: 500px;
}
</style>

<!-- HTML -->
<div class="iframe-container">
  <iframe 
    src="https://example.com"
    title="Responsive iframe">
  </iframe>
</div>

<!-- CSS -->
<style>
.iframe-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
</style>

// Create iframe element
function createIframe(src, width, height) {
  const iframe = document.createElement('iframe');
  iframe.src = src;
  iframe.width = width;
  iframe.height = height;
  iframe.title = 'Dynamic iframe';
  iframe.style.border = 'none';
  
  return iframe;
}

// Usage example
const newIframe = createIframe('https://example.com', '600', '400');
document.getElementById('container').appendChild(newIframe);

// Alternative method
const iframeHTML = `<iframe src="${src}" width="${width}" height="${height}"></iframe>`;
document.getElementById('container').innerHTML = iframeHTML;

// Parent page JavaScript
const iframe = document.getElementById('myIframe');

// Listen for iframe load event
iframe.addEventListener('load', function() {
  console.log('Iframe loaded successfully');
});

// Listen for iframe messages
window.addEventListener('message', function(event) {
  if (event.origin !== 'https://trusted-site.com') return;
  
  console.log('Message from iframe:', event.data);
});

// Send message to iframe
iframe.contentWindow.postMessage('Hello from parent!', 'https://trusted-site.com');

// Iframe page JavaScript (inside iframe)
window.addEventListener('message', function(event) {
  if (event.origin !== 'https://parent-site.com') return;
  
  console.log('Message from parent:', event.data);
  
  // Send response back
  event.source.postMessage('Hello from iframe!', event.origin);
});

// Get iframe element
const iframe = document.getElementById('myIframe');

// Change iframe source
iframe.src = 'https://new-example.com';

// Modify dimensions
iframe.width = '800';
iframe.height = '600';

// Update attributes
iframe.setAttribute('title', 'Updated iframe title');
iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');

// Remove attributes
iframe.removeAttribute('frameborder');

// Check iframe properties
console.log('Iframe src:', iframe.src);
console.log('Iframe dimensions:', iframe.width + 'x' + iframe.height);
console.log('Iframe title:', iframe.title);

// Access iframe content (same-origin only)
try {
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  console.log('Iframe content:', iframeDoc.title);
} catch (e) {
  console.log('Cannot access iframe content (cross-origin)');
}