Giter VIP home page Giter VIP logo

fideo-react's Introduction

fideo-react

npm install fideo-react --save

Based on https://github.com/Trolleymusic/fideo.js - implemented for use in a React application

I've been sticking loads of youtube and vimeo embeds in sites recently, and they're easy to do, but there's always a few extra lines of CSS and a couple of extra div wrappers you need to write to get them to be dynamically sized and/or work properly in a responsive design without them hanging out the end.

So fideo is a little piece of javascript that you run on the embedded iframe and it'll take care of everything. You don't need to add any images or CSS and it has no dependencies.

When you want to embed a video, but the size of video is going to expand to fill the parent container it's a pain in the butt because the iframe doesn't grow the height to the correct aspect ratio when the width grows.

Fideo embeds a little transparent png behind your iframe/component, correctly sized for the aspect ratio so that the container's height grows naturally. The child component is positioned absolutely to fill the container.

import React from 'react'
import Fideo from 'fideo-react'

export default () => {
  <Fideo>
    <iframe src='https://www.youtube-nocookie.com/embed/jd-48XjG_Cs?rel=0&amp;showinfo=0?ecver=' frameBorder='0' gesture='media' allow='encrypted-media' allowFullScreen />
  </Fideo>
}

At the moment there are six embedded aspect ratios, 16:9, 4:3, 1:1, 2.39:1, 2.35:1, and 21:9 - if you don't specify a size when calling fideo, then it'll default to 16:9.

You can pass size as an attribute/prop: <Fideo size='2.39:1'>

fideo-react's People

Contributors

trolleymusic avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.