|
|
| Line 1: |
Line 1: |
| | | <html> |
| <html lang="en"> | | <div style="display: flex; justify-content: center; margin: 20px auto; width: 100%;"> |
| <head> | | <div style="width: 100%; max-width: 1280px; aspect-ratio: 16 / 9;"> |
| <meta charset="UTF-8">
| | <iframe src="https://yourdomain.com/video.html?src=camera_name&autoplay=true&mute=true" width="100%" height="100%" allow="autoplay; fullscreen" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| | </div> |
| <title>Camera Stream (720p)</title>
| | </div> |
| <style>
| |
| body {
| |
| background-color: #111;
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| height: 100vh;
| |
| margin: 0;
| |
| font-family: sans-serif;
| |
| }
| |
| | |
| /* 720p Container Blueprint */
| |
| .stream-container {
| |
| width: 100%;
| |
| max-width: 1280px; /* Limits width to 720p horizontal */
| |
| aspect-ratio: 16 / 9; /* Enforces 720p aspect ratio */
| |
| box-shadow: 0 10px 30px rgba(0,0,0,0.5);
| |
| background-color: #000;
| |
| border-radius: 8px;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .stream-container iframe {
| |
| width: 100%;
| |
| height: 100%;
| |
| border: none;
| |
| display: block;
| |
| }
| |
| </style> | |
| </head> | |
| </html> | | </html> |
