html-series/09-Multimedia-Embeds.html at main · jdcodebase/html-series · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>9-Multimedia-Embeds</title>
  </head>

  <body>
    <!-- Audio -->
    <audio controls autoplay muted loop>
      <source src="assets/audio.mp3" type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>

    <br />
    <hr />

    <!-- Video -->
    <video controls width="400" muted loop poster="assets/dog.webp">
      <source src="assets/video.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>

    <br />
    <hr />

    <!-- Website Embed (Iframe) -->
    <iframe
      src="https://en.wikipedia.org/wiki/HTML"
      width="600"
      height="400"
      allowfullscreen
    ></iframe>

    <br />
    <hr />

    <!-- YouTube Embed -->
    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/vVkathJ0GaE"
      allowfullscreen
    ></iframe>

    <br />
    <hr />

    <!-- Google Maps Embed -->
    <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d447989.90563537244!2d76.76037686803456!3d28.692005574811837!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d047309fff32f%3A0xfc5606ed1b5d46c3!2sDelhi!5e0!3m2!1sen!2sin!4v1765611295673!5m2!1sen!2sin"
      width="600"
      height="450"
      style="border: 0"
      allowfullscreen
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"
    ></iframe>

    <br />
    <hr />

    <!-- PDF Embed -->
    <embed src="assets/Resume.pdf" width="500" height="400" />
  </body>
</html>