<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; text-align: center; }
        .media-card { background: white; padding: 20px; border-radius: 16px; margin: 15px auto; max-width: 600px; box-shadow: 0 2px 15px rgba(0,0,0,0.1); }
    </style>
</head>
<body>
    <h1 style="color:#1B3A5C">Multimedia</h1>
    <div class="media-card">
        <h3>YouTube Video (iframe)</h3>
        <iframe width="100%" height="300" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen style="border-radius:12px"></iframe>
    </div>
    <div class="media-card">
        <h3>Video tegi</h3>
        <video width="100%" controls style="border-radius:12px">
            <source src="video.mp4" type="video/mp4">
            Brauzeringiz video tegini qo'llab-quvvatlamaydi.
        </video>
    </div>
</body>
</html>