Embedded Media

class: middle

.eight[CSET-110] 
.eight[Web Development I]

# Embedded Media

---

# Contents:

- [object](#object)
- [image](#image)
- [picture](#picture)
- [audio](#audio)
- [video](#video)
- [iframe](#iframe)
- [canvas](#canvas)

---
name: object

# `<object>`

[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object)

- Represents an .eight[external resource]
- Needs .eight[data] attribute to point at source, like .eight[src] or .eight[href]
- Needs .eight[type] attribute to clarify what source is, like `<link>` element

---

# Example

```html
<object type="application/pdf"
 data="../cset-110_syllabus.pdf"
 width="100%"
 height="60%">
</object>
```

---

# Example

---

# Things to Think About

- Mostly used for embedding Flash or PDFs
- Very dependent on device, test everywhere
- There are better elements for specific purposes

---
name: image

# `<img>`

[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)

- Embeds a raster or vector image file
- Needs .eight[src] attribute to point at file
- Should have .eight[alt] attribute in case image isn't embedded
- [Lots of supported formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Supported_image_formats)

---

# Raster Example

```html
<img src="images/mario.png" alt="8-bit Mario" />
```

---

# Bad Raster Examples

---

# Vector Example

```html
<img src="images/laptop.svg" alt="Laptop icon" />
```

Icon made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>

---

# Srcset Example

[MDN example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Using_the_srcset_and_sizes_attributes)

---

# Things to Think About

- Images are .eight[replaced elements], meaning you can only style the box that contains them
- Default to `display: inline;` with width and height determined by the file
- Unlike other inline elements, you can set block properties like width or margin.
- Format matters: PNGs can have transparency, GIFs can loop, etc.

---
name: picture

# `<picture>`

[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)

- Contains optional `<source>` elements and one `<img>` element
- Provides different images for different scenarios
- Img element is fallback for old browsers
- Source element can use media queries to check browser size and capability

---

# Example

```html
<picture>
 <source srcset="images/books-portrait.jpg"
 media="(min-width: 800px)">
 <img src="images/books-landscape.jpg" />
</picture>
```

---

# Example

---

# Things to Think About

- Good for Art Direction, changing design according to responsive layouts
- Good for offering different image formats in case a browser can't handle newer ones

---

# More Resources For Images:

- [CSS Tricks: Use Srcset](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/)
- [MDN Responsive Image Tutorial](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
- [Interneting Is Hard: Responsive Images](https://internetingishard.com/html-and-css/responsive-images/)

---
name: audio

# `<audio>`

[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)

- Embed sound content in a media player
- Needs `src` attribute with path to file
- Can use `controls` attribute to show playback buttons
- Can provide `source` element for different file types

---
name: video

# `<video>`

[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)

- Embed video content in a media player
- Needs `src` attribute with path to file
- Can use `controls` attribute to show playback buttons
- Can provide `source` element for different file types

---
name: iframe

# `<iframe>`

[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)

- A browser window within a browser window
- Use `src` attribute to load other page
- Beware! Two windows is twice the processing power.

---
name: canvas

# `<canvas>`

[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas)

- Can draw graphics or animations on the screen...
- But you need JavaScript.
- Good for simple games!