pxs-video v2.4.1

PXS Video

A video section built for Shopify that supports Youtube and Vimeo

Table of contents

• Getting started
  • Installation
  • Including styles
  • Including scripts
• Styles
  • Variables
• Scripts
• Settings

Getting started

Installation

First we'll need to add pxs-video as a theme dependency:

npm install pixelunion/pxs-video

The line above will include the pxs-video package as a dependency to our theme. We can then use Paskit to add the section to our build folder.

If you deploy the theme, you will see that the section shows up as Video under the Video category.

Including styles

Now that we've got our section added to our build folder, we'll need to include the styles in our theme. We can do this by adding the following line to our SCSS.

@import "path/to/node_modules/pxs-video/src/styles/pxs-video";

Including scripts

Now that we've got the pxs-video styles in our theme, we can use the following line to import the Javascript

import PxsVideo from 'pxs-video';

Then all we need to do is register the section like it's any other section:

sections.register('pxs-video', section => new PxsVideo(section));

Styles

Variables

All of the following variable values are set as !default meaning we can change the value of these variables anywhere in our code. This is different than standard SCSS variables where we would have to change the variable after it is declared.

Scripts

Included with pxs-video are 4 different builds of the Javascript. These builds can be found in the dist folder.

Settings