# Player Types

Check out our WordPress Demo (opens new window) to see what the plugin looks like in use.

# ParOne Demo Site

You can view a demo version of the wordpress site here: https://wordpress.parone.com (opens new window)

This site will show you examples of the shortcodes and the different style of players.


# Single Post

The most common way to display a ParOne video on your app or website is each video in its own video block.


ParOne Default Video Block

View Example on our Demo Site

The <parone-video-block> tag will produce a single video inside of a single video block.

The campaign property specifies a single campaign to display, while the feed property identifies your application so that we can attribute views to your organization and provide analytics.

<body>
    <parone-video-block campaign="CAMPAIGN_ID" feed="YOUR_FEED_ID">
</body>

If you're using a test feed throughout development, env="stage" to use our staging server.

<body>
    <parone-video-block campaign="CAMPAIGN_ID" feed="TEST_FEED_ID" env="stage">
</body>



# Single Post, Looping Playlist

This block is visually similar to the single post, but will autoplay through all available videos. If there are no new videos to fetch, it will start over at the beginning. This method is typically best when you want to present an autoplaying video for a certain category without wanting users to select the video that comes next.


ParOne Default Video Block

View Example on our Demo Site

This block only needs the feed property, which identifies your application so that we can attribute views to your organization and provide analytics as well as providing the list of videos.

<body>
    <parone-video-block-playlist feed="YOUR_FEED_ID">
</body>

If you're using a test feed throughout development, env="stage" to use our staging server.

<body>
    <parone-video-block-playlist feed="TEST_FEED_ID" env="stage">
</body>



# Thumbnail Carousels

The most common way to display ParOne video feeds on your website is a carousel.


ParOne Default Thumbnail Carousel


View Horizontal Example View Vertical Example

ParOne uses two tags to create a thumbnail carousel.

For a horizontal carousel use <parone-thumbnail-carousel> tag will produce a horizontal carousel and for a vertical carousel carousel use <parone-vertical-thumbnail-carousel> tag.

When clicked, these tags will produce a carousel of thumbnails that will open a dynamic video page for the corresponding campaign.

IMPORTANT

This requires setting up a dynamic page. See Setting up Dynamic Pages in HTML or if you're using Wordpress see Setting up Dynamic Pages in Wordpress.

The feed property identifies your application allowing ParOne to attribute views to your organization and provide analytics.

<body>
    <parone-thumbnail-carousel feed="YOUR_FEED_ID">
</body>
<body>
    <parone-vertical-thumbnail-carousel feed="YOUR_FEED_ID">
</body>

If you're using a test feed throughout development, env="stage" to use our staging server.

<body>
    <parone-thumbnail-carousel feed="TEST_FEED_ID" env="stage">
</body>
<body>
    <parone-vertical-thumbnail-carousel feed="TEST_FEED_ID" env="stage">
</body>



# Playlist

ParOne video feeds on websites can be displayed with a single embed that displays a main video with the available videos nearby. These work best on websites where there is a "Videos" page and all of the videos will be located here.


ParOne Default Playlist

View Playlist Example



The <parone-video-playlist> tag will produce a single container with a video inside of a single video block and the available videos to the right of the main block.

The feed property identifies your application so that we can attribute views to your organization and provide analytics, as well as get the list of videos in this playlist.

<body>
    <parone-video-playlist feed="YOUR_FEED_ID">
</body>

If you're using a test feed throughout development, env="stage" to use our staging server.

<body>
    <parone-video-playlist feed="TEST_FEED_ID" env="stage">
</body>



ParOne video feeds on websites can be displayed with a single embed that displays a main video with the available videos below in a carousel. These work best on websites where there is a "Videos" page and all of the videos will be located here, or specific landing pages around a certain feed topic.


ParOne Default Playlist Carousel

View Playlist Carousel Example



The <parone-playlist-carousel> tag will produce a single larger video on top, with a carousel of video options below it.

The feed property identifies your application so that we can attribute views to your organization and provide analytics, as well as get the list of videos in this playlist.

The count property indicates how many videos to display per page. You will still need to customize the layout of the list, via the videoListStyle selector in the style editor. See here for more information.

<body>
    <parone-playlist-carousel feed="YOUR_FEED_ID">
</body>

If you're using a test feed throughout development, env="stage" to use our staging server.

<body>
    <parone-playlist-carousel feed="TEST_FEED_ID" env="stage">
</body>



# Infinite Scroll

Another common way to display ParOne video feeds on apps is a single embed that displays an infinite list of videos containing video blocks. These work best on apps where there is a "Videos" section and all of the videos will be located here.


ParOne Default Infinite Scroll


The <parone-video-feed> tag will produce a single container with a feed of individual single video blocks.

The feed property identifies your application so that we can attribute views to your organization and provide analytics, as well as get the list of videos in this feed.

IMPORTANT

Note that when using the <parone-video-feed> tag, you must either specify a height on the tag or in the containing element in order for scrolling to properly load additional content.

<body>
    <parone-video-feed feed="YOUR_FEED_ID">
</body>

If you're using a test feed throughout development, env="stage" to use our staging server.

<body>
    <parone-video-feed feed="TEST_FEED_ID" env="stage">
</body>
Last Updated: 10/10/2021, 3:19:20 PM