Fullscreen Iframe with Header
/* Style for the fixed header */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #000; /* Black background */
color: white;
display: flex;
align-items: center;
padding: 0 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 10000; /* Ensure it's above the iframe */
font-family: Arial, sans-serif;
}
.header button {
background-color: white;
color: #d35400;
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
}
.header button:hover {
background-color: #e6e6e6;
}
.header h1 {
margin: 0 0 0 20px;
font-size: 20px;
}
/* Fullscreen iframe styling */
iframe {
position: fixed;
top: 60px; /* Start below the header */
left: 0;
width: 100vw; /* Use the full viewport width */
height: calc(100vh - 60px); /* Full height minus header height */
border: none; /* Remove iframe border */
z-index: 9999; /* Below the header */
}
.hide {
display: none !important; /* Completely hide unwanted elements */
}