This was an exercise in building a robust media interface with just HTML, CSS and JS. I wanted to build a tabbed YouTube video component without relying on a javascript framework, so I followed the example of various open source projects to make it happen. I made some significant improvements to the type safety and various modifications to make it work for my needs. Please see the credits section for links to the original projects and tutorials I used to build this.
This is a simple tabbed interface that allows you to switch between different videos. The videos are defined in the HTML, and the tabs are generated dynamically based on the number of videos. The videos are loaded from YouTube using the YouTube iFrame API. And will play automatically when the tab is selected.
PostCSS to bundle, import from NPM, local or remote URLs, handy easings, plus postcss-preset-env for latest CSS features.
Rollup to bundle, treeshake, import from NPM, local or remote URLs, import processed CSS, plus babel-preset-env for latest JS features.
Browsersync with all the goodies for local dev: live reload, hot swap CSS, scroll syncing, remote debugging, etc. Prod server is just a static server.
mkdir new-project-name && cd $_git clone --depth=1 https://github.com/tcbrooks/tabs-gui-yt-challenge.git . && rm -rf ./.git
OR (essentially the same thing with npx+degit)
npx degit argyleink/shortstack
npm inpm start
Running npm start runs Browsersync, Rollup and Postcss concurrently, watching changes to your files in ./app and refreshes connected browsers.
Running npm run build compiles and minifies your code in app and outputs the optimised result to a folder called dist that's ready for static hosting.
Running npm run production will build your project and start a server at dist.
- Adam Argyle The original tutorial I followed to build the tabbed interface. A large portion of the HTML and CSS is from this tutorial.
- Feross Aboukhadijeh The original YouTube player I used to build the video player. I modified it to work with the tabbed interface.