Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Youtube

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

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;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Vimeo

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

Preview

Jsx

import React from 'react';
const VimeoEmbeds = () => {
  return (
    <div className="ratio ratio-16x9">
        <iframe title="vimeo-player" src="https://player.vimeo.com/video/76979871?autoplay=0" allowFullScreen />
    </div>
  );
}

export default VimeoEmbeds;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Soundcloud

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

Preview

Jsx

import React from 'react';
const SoundCloud = () => {
  return (
    <div className="ratio ratio-21x9">
        <iframe title='soundCloud' height={300} src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/41395010&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" />
    </div>
  );
}

export default SoundCloud;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Ratio

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

Preview

Jsx

Classes

import React from 'react';
const SoundCloud = () => {
  return (
    <Row>
        <Col sm={4}>
            <div className="ratio ratio-21x9">
                <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>
        </Col>
        <Col sm={4}>
            <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>
        </Col>
        <Col sm={4}>
            <div className="ratio ratio-4x3">
                <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>
        </Col>
    </Row>
  );
}

export default SoundCloud;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="ratio ratio-[value]"`	21x9 / 16x9 / 4x3 / 1x1

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.