Embedding Multimedia (Back)

Embedding Images

• Image Basics & Image Figures

  Image Basics

  
  Sample Code: <img src="../cloud_thumb.png" alt="Rainbow and a smiling cloud." />
  

  Image Figure

  

  
  Sample Code: <figure> <img src="../cloud.png" alt="Rainbow and a smiling cloud (Full sized)."> <figcaption>Fig.1 - Digital, Cyberspace.</figcaption> </figure>
• Image Maps

  
  Sample Code: <img src="../image_map.png" alt="Image Map example" usemap="#imgMap" /> <map name="imgMap"> <area shape="rect" coords="28,30,131,131" alt="Square" title="Square" href="#" /> <area shape="circle" coords="69,226,47" alt="Circle" title="Circle" href="#" /> <area shape="poly" coords="161,74,223,109,285,75,270,143,325,189,253,197,225,263,196,197,125,191,177,144,161,78" alt="Star" title="Star" href="#" /> </map>
• Responsive Pictures

  
  Sample Code: <picture> <source media="(max-width: 599px)" srcset="../cloud_thumb.png" /> <source media="(min-width: 600px)" srcset="../cloud.png" /> <img src="../cloud.png" alt="This Cloud is back again!" /> </picture>

Embedding Audio & Video

• Audio

  
  Sample Code: <audio controls> <source src="../rain.mp3" type="audio/mp3" /> <source src="../rain.ogg" type="audio/ogg" /> <p>Your browser doesn't support this audio file. Here is a <a href="../rain.wav">link to the audio</a> instead.</p> </audio>
• Video

  
  Sample Code: <video controls height="360"> <source src="../stellar_jay.mp4" type="video/mp4" /> <source src="../stellar_jay.webm" type="video/webm" /> <track kind="subtitles" src="../stellar_jay.vtt" srclang="en" label="English" default /> </video>

Other Embedding Technologies

• Canvas Element

  
  Sample Code: <canvas id="canvas1" width="150" height="150"></canvas> <script type="application/javascript"> function draw() { const canvas = document.getElementById("canvas1"); if (canvas.getContext) { const ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200, 0, 0)"; ctx.fillRect(10, 10, 50, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect(30, 30, 50, 50); } } draw(); </script>
• Embed Element

  
  Sample Code: <embed type="video/mp4" src="../stellar_jay.mp4" height="360" title="Stellar Jay" /> <embed type="image/png" src="../cloud.png" title="Cloud graphic" /> <embed type="application/pdf" src="../sample.pdf" title="Embedded PDF document" />
• IFrame Element

  
  Sample Code: <iframe width="560" height="315" src="https://www.youtube.com/embed/7PVbAYHCGrM?si=NdWi7DbXz_3IgTGG" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>
• Object Element

  
  Sample Code: <object type="video/webm" data="../stellar_jay.webm" width="320" title="Stellar Jay"></object> <object type="image/png" data="../cloud.png" width="320" title="Cloud graphic"></object> <object type="application/pdf" data="../sample.pdf" title="Sample PDF document"></object>