WebSlides Tutorial

# Media

* * *

Free Download

## A quick reference guide for beginners

Videos, images, maps, and charts.

- ### Images

  1. Background Images
  2. Overlays (light and dark)
  3. 500+ SVG Icons
  4. Logos
  5. Avatars
  6. Devices
  7. Screenshots

- ### Videos

  1. Background Videos (hosted & overlay)
  2. Embedding YouTube videos
  3. Fullscreen YouTube videos
  4. YouTube API:
     1. Autoplay, loop, mute, and no controls
     2. Fullscreen video
     3. Background video with overlay

- ### Maps & Charts

  1. Embedding maps
  2. Embedding the map in a card
  3. Fullscreen maps
  4. Embedding charts

###
Insert images wherever you want

15 different positions.

### 15 Different Backgrounds

- .background (fullscreen)
- .background-top (cover)
- .background-bottom (cover)
- .background.light (opacity)
- .background.dark (opacity)
- .background-center
- .background-center-top
- .background-center-bottom
- .background-left
- .background-left-top
- .background-left-bottom
- .background-right
- .background-right-top
- .background-right-bottom
- .background-anim (animated)

####
.background = Fullscreen Backgrounds

How to embed Unsplash photos? →

    <section>
      <span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"></span>
      <div class="wrap">
        <h1>Slide</h1>
      </div>
    </section>

Position .background outside of .wrap container.

### .background-(position)

`.background-right-bottom`

- ## Ultra-Fast WiFi

  Simple and secure file sharing.

- ## All day battery life

  Your battery worries may be over.

- ## Lifetime Warranty

  We'll fix it or if we can't, we'll replace it.

### .background-(position)

`.background-left-bottom`

- ## Ultra-Fast WiFi

  Simple and secure file sharing.

- ## All day battery life

  Your battery worries may be over.

- ## Lifetime Warranty

  We'll fix it or if we can't, we'll replace it.

## .background.anim

# Opacity

`[class*="bg-"] > .background.light`

    <section class="bg-black">
      <span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
      <div class="wrap">
        <h1>Slide</h1>
      </div>
    </section>

# Opacity

`[class*="bg-"] > .background.dark`

    <section class="bg-black">
      <span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
      <div class="wrap">
        <h1>Slide</h1>
      </div>
    </section>

Optional · 500+ icons

##
Font Awesome as SVG icons

    <svg class="fa-flag">
    	<use xlink:href="#fa-flag"></use>
    </svg>

How to change icons?

1. Go to fontastic.me.
2. Create a free account.
3. Select new icons.
4. Publish as SVG sprite.
5. Edit svg-icons.css and svg.icons.js.

### ul.flexblock.metrics.border

- Founded 2024
- 24M Subscribers
- Revenue: $16M
- Monthly Growth 64%
- 8 Offices
- 48 Employees
- EBITDA: $2,4M
- Bank: $32M

## Transparent Logos

Change the color of a .svg/.png image using CSS. Images are property of their respective owners.

- Height recommended: 48px

- `img.blacklogo`

- `img.graylogo`

- `img.whitelogo`

> An avatar is the graphical representation of the user or the user's alter ego or character. The word avatar originates in Hinduism.

> @username, .avatar-56

`img[class*="avatar-"]` (80, 72, 64, 56, 48, and 40).

## Devices

- ## Ultra-Fast WiFi

  Simple and secure file sharing.

- ## All day battery life

  Your battery worries may be over.

- ## Lifetime Warranty

  We'll fix it or if we can't, we'll replace it.

## Screenshots

HTML/CSS Browser.

    <figure class="browser">
      <img alt="Screenshot" src="image.jpg">
    </figure>

## Videos

### Background videos

    <section class="fullscreen">
      <div class="embed">
        <video autoplay loop poster="image.jpg">
          <source src="video.mp4" type="video/mp4">
        </video>
      </div>
    </section>

.fullscreen > .embed (responsive) > video

### Background videos

Transparent overlay:

    <section class="fullscreen bg-blue">
      <div class="embed dark">
        <video autoplay muted loop poster="image.jpg">
          <source src="video.mp4" type="video/mp4">
        </video>
      </div>
    </section>

.fullscreen.bg-blue > .embed.dark (or .light) > video

## Muted

Overlay: `section.fullscreen.bg-blue > embed.dark` or .light

### Responsive Videos

Just copy and paste the code from YouTube to your slide.

    <div class="embed">
     <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
     </iframe>
    </div>

`.embed` (responsive)

### Fullscreen YouTube Video

    <section class="fullscreen">
      <div class="embed">
        <iframe src="https://www.youtube.com/embed/iY05U7GaU5I">
        </iframe>
      </div>
    </section>

`.fullscreen` > `.embed` (responsive)

###
YouTube API

Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.

You should use a local or a remote server since the YouTube API doesn't seem to work nicely when using the file directly on the browser.

###
YouTube API Parameters

Syntax: `data-autoplay, data-loop, data-no-controls, data-mute`.

    <div class="embed">
      <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-loop>
      </div>
    </div>

autoplay + loop

    <div class="embed">
      <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-mute data-no-controls>
      </div>
    </div>

autoplay + mute + no controls.

### YouTube API

`autoplay + loop`

    <div class="embed">
      <div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop>
      </div>
    </div>

###
Autoplay Feature

Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.

### Let's make some magic with the YouTube API

How to make a fullscreen YouTube video? `.fullscreen > .embed`

    <section class="fullscreen">
      <div class="embed">
        <div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls</div>
      </div>
    </section>

The video will automatically play when the slide is loaded.

### Fullscreen YouTube video background

Overlaying a transparent background on an embedded Youtube video:

    <section class="fullscreen bg-black">
      <div class="embed dark">
        <div data-youtube data-youtube-id="c9psfOxJysw" data-autoplay data-loop data-mute data-no-controls</div>
      </div>
    </section>

`.fullscreen[class*="bg-"] > .embed.dark` or .light

## Overlay

`.fullscreen[class*="bg-"] > .embed.dark` or .light

###
Maps & Charts

Status of Net Neutrality around the world.

Google Maps

## Discover Seville

.card-50.bg-white

- Density: 140/km2
- Population: 703,021
- Website: visitasevilla.es

There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcazar palace complex, the Cathedral and the General Archive of the Indies.

### Charts

## Start in seconds

120+ prebuilt slides ready to use.

Free Download
Pay what you want.

## 😎

### @WebSlides