HTML Multimedia Embeds

Multimedia embedding is used to embed content from various sources such as YouTube, Google Maps, and more.

Embed Tags

embed

<embed src="file.pdf" type="application/pdf" width="100%" height="600px">

object

<object data="file.pdf" type="application/pdf" width="100%" height="600px">
    <p>Your browser does not support PDF.</p>
</object>

iframe

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

Case Study: Campus Multimedia Portal

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Campus Multimedia Portal</title>
    <style>
        .multimedia-section {
            margin-bottom: 30px;
        }

        .video-container {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            max-width: 800px;
            margin: 0 auto;
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .map-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
        }

        .map-container iframe {
            width: 100%;
            height: 400px;
            border: 0;
        }
    </style>
</head>
<body>
    <h1>Campus Multimedia Portal</h1>

    <!-- Profile Video -->
    <section class="multimedia-section">
        <h2>Campus Profile Video</h2>
        <div class="video-container">
            <iframe 
                src="https://www.youtube.com/embed/VIDEO_ID" 
                frameborder="0" 
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                allowfullscreen>
            </iframe>
        </div>
    </section>

    <!-- Location Map -->
    <section class="multimedia-section">
        <h2>Campus Location</h2>
        <div class="map-container">
            <iframe 
                src="https://www.google.com/maps/embed?pb=!1m18!..." 
                allowfullscreen="" 
                loading="lazy">
            </iframe>
        </div>
    </section>

    <!-- PDF Document -->
    <section class="multimedia-section">
        <h2>Academic Guide</h2>
        <object data="academic-guide.pdf" type="application/pdf" width="100%" height="600px">
            <p>Your browser does not support PDF. <a href="academic-guide.pdf">Download PDF</a></p>
        </object>
    </section>
</body>
</html>

Everyday Case Study

Case: A developer needs to embed a presentation.

<h2>Lecture Presentation</h2>

<!-- Google Slides Embed -->
<iframe 
    src="https://docs.google.com/presentation/d/e/2PACX-123/embed?start=false&loop=false" 
    frameborder="0" 
    width="960" 
    height="569" 
    allowfullscreen="true">
</iframe>

Responsive Embeds

/* Responsive Video */
.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Responsive Map */
.responsive-map {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}

.responsive-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Best Practices

1. Alternative content: Provide a fallback
2. Responsive: Use CSS for responsiveness
3. Lazy loading: For performance
4. Accessibility: Use the title attribute
5. Security: Only embed from trusted sources

Summary

Multimedia embedding allows you to embed content from various sources. Use it wisely and consider security.