New

Powerful Svelte-Bootstrap SaaS App Template

Admin CRM Application Template

Robust Next.js SaaS App Template

Powerful React-Bootstrap SaaS App Template

Modern Remix SaaS App Template

VueJS-Bootstrap SaaS App Template

Intuitive Nuxt-Bootstrap SaaS App Template

Embeds

Perfect for responsively handling video or slideshow embeds based on the width of the parent.

Youtube

Wrap Youtube <iframe> in a parent element with .embed-responsive and an aspect ratio.

<div class="ratio ratio-16x9">
	<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

import React from 'react';
const YoutubeEmbeds = () => {
  return (
    <div className="ratio ratio-16x9">
        <iframe width={560} height={315} src="https://www.youtube.com/embed/BvXR97eR1QE" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
    </div>
  );
}
export default YoutubeEmbeds;

import React from 'react';
const YoutubeEmbeds = () => {
  return (
    <div className="ratio ratio-16x9">
        <iframe width={560} height={315} src="https://www.youtube.com/embed/BvXR97eR1QE" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
    </div>
  );
}
export default YoutubeEmbeds;

<template>
    <div class="ratio ratio-16x9">
        <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
    </div>
</template>

<template>
    <div class="ratio ratio-16x9">
        <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
    </div>
</template>

<div class="ratio ratio-16x9">
    <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

Vimeo

Wrap Vimeo <iframe> in a parent element with .embed-responsive and an aspect ratio.

<div class="ratio ratio-16x9">
	<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

import React from 'react';
const YoutubeEmbeds = () => {
  return (
    <div className="ratio ratio-16x9">
        <iframe width={560} height={315} src="https://www.youtube.com/embed/BvXR97eR1QE" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
    </div>
  );
}
export default YoutubeEmbeds;

import React from 'react';
const YoutubeEmbeds = () => {
  return (
    <div className="ratio ratio-16x9">
        <iframe width={560} height={315} src="https://www.youtube.com/embed/BvXR97eR1QE" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
    </div>
  );
}
export default YoutubeEmbeds;

<template>
    <div class="ratio ratio-16x9">
        <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
    </div>
</template>

<template>
    <div class="ratio ratio-16x9">
        <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
    </div>
</template>

<div class="ratio ratio-16x9">
    <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

Soundcloud

Wrap Soundcloud <iframe> in a parent element with .embed-responsive and an aspect ratio.

<div class="ratio ratio-16x9">
	<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

import React from 'react';
const YoutubeEmbeds = () => {
  return (
    <div className="ratio ratio-16x9">
        <iframe width={560} height={315} src="https://www.youtube.com/embed/BvXR97eR1QE" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
    </div>
  );
}
export default YoutubeEmbeds;

import React from 'react';
const YoutubeEmbeds = () => {
  return (
    <div className="ratio ratio-16x9">
        <iframe width={560} height={315} src="https://www.youtube.com/embed/BvXR97eR1QE" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
    </div>
  );
}
export default YoutubeEmbeds;

<template>
    <div class="ratio ratio-16x9">
        <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
    </div>
</template>

<template>
    <div class="ratio ratio-16x9">
        <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
    </div>
</template>

<div class="ratio ratio-16x9">
    <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

Ratio

Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided

<div class="ratio ratio-16x9">
	<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

import React from 'react';
const YoutubeEmbeds = () => {
  return (
    <div className="ratio ratio-16x9">
        <iframe width={560} height={315} src="https://www.youtube.com/embed/BvXR97eR1QE" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
    </div>
  );
}
export default YoutubeEmbeds;

import React from 'react';
const YoutubeEmbeds = () => {
  return (
    <div className="ratio ratio-16x9">
        <iframe width={560} height={315} src="https://www.youtube.com/embed/BvXR97eR1QE" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
    </div>
  );
}
export default YoutubeEmbeds;

<template>
    <div class="ratio ratio-16x9">
        <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
    </div>
</template>

<template>
    <div class="ratio ratio-16x9">
        <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
    </div>
</template>

<div class="ratio ratio-16x9">
    <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

Youtube
Vimeo
Soundcloud
Ratio