Media Players

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Video

Embed video with the Gameforest embedding component like in the example below. Easy to set custom thumbnail and video id with data-src attribute.

Preview
Markup

<div class="video-play" data-src="https://www.youtube.com/embed/i8qzBkHjk_0?rel=0&amp;amp;autoplay=1&amp;amp;showinfo=0">
  <div class="embed-responsive embed-responsive-16by9">
    <img class="embed-responsive-item" src="https://img.youtube.com/vi/K5tRSwd-Sc0/maxresdefault.jpg">
    <div class="video-play-icon">
      <i class="fa fa-play"></i>
    </div>
  </div>
</div>

Caption

Add title and video length to the video component with .video-caption and .length classes.

Preview
Markup

For Honor: Walkthrough Gameplay Warlords

5:32

<div class="video-play" data-src="https://www.youtube.com/embed/i8qzBkHjk_0?rel=0&amp;amp;autoplay=1&amp;amp;showinfo=0">
  <div class="embed-responsive embed-responsive-16by9">
    <img class="embed-responsive-item" src="https://img.youtube.com/vi/K5tRSwd-Sc0/maxresdefault.jpg">
    <div class="video-caption">
      <h5>Uncharted: The Lost Legacy Story Trailer</h5>
      <span class="length">4:05</span>
    </div>
    <div class="video-play-icon">
      <i class="fa fa-play"></i>
    </div>
  </div>
</div>

Twitch

Video component can be used with any media platforms like youtube, vimeo or twitch only need to add the full url of video like in the example below.

Preview
Markup

<div class="video-play" data-src="https://player.twitch.tv/?video=v122839988&autoplay=true">
  <div class="embed-responsive embed-responsive-16by9">
    <img class="embed-responsive-item" src="https://img.youtube.com/vi/tklQ47Hpfxw/maxresdefault.jpg">
    <div class="video-play-icon">
      <i class="fa fa-play"></i>
    </div>
  </div>
</div>

Soundcloud

You can embed audio, music into the site with iframe and the soundcloud api.

Preview
Markup