Video Page Individual Listings
COMPONENT SELECTOR GUIDE
Video Page Content
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Content Container | ||
| .lesson-details | The outer wrapper for the video page content, including the video and the text content. |
|
| Video Elements (these do not refer to YouTube videos, because we cannot style YouTube iframe elements with CSS) | ||
| .lesson-video-inner-wrapper .plyr__video-wrapper | The parent container of the video element. |
|
| .lesson-video-inner-wrapper .plyr__video-wrapper video | The video element. |
|
| .lesson-video-inner-wrapper .plyr__poster | The thumbnail image of the video element. |
|
| .lesson-video-inner-wrapper .plyr__control | The overlay "Play/Pause" button that shows on the video. |
|
| .lesson-video-inner-wrapper .plyr__control svg | The vector imagery of both the play and pause icons. |
|
| .lesson-video-inner-wrapper .plyr__controls | The parent container of the video controls that show at the bottom of the video, including the current video time, that total video duration, the progress indicator, the volume button, the settings button, and the full screen toggle button. |
|
| .lesson-video-inner-wrapper .plyr__controls__item | All of the button controls at the bottom of the video excluding the progress indicator. This includes the time text, the speaker button, the settings button, and the full screen toggle button. |
|
| .lesson-video-inner-wrapper .plyr__controls__item svg | All of the icon imagery for the control buttons, including the speaker button, the settings button, and the full screen toggle button. |
|
| .lesson-video-inner-wrapper .plyr__controls__item.plyr__time | The current time and the video duration text elements. |
|
| Text Elements (Meta data, title and description) | ||
| .lesson-detail-text-wrapper | The video page text content wrapper below the video. |
|
| .lesson-grid-meta-container | The grid container for the meta data. |
|
| .lesson-grid-meta-container .grid-categories | The grid container for the categories. |
|
| .lesson-grid-meta-container .lesson-category a | The category text link. |
|
| .lesson-grid-meta-container .lesson-duration | The date text. |
|
| .lesson-details-title | The video title text. |
|
| .lesson-details-description | The container for the video description. |
|
| .lesson-details-description p | The video description text. |
|
HTML Structure Explanation
The container for the video elements on the video page.
The container for the video elements on the video page.
The container for the video page text content elements, including the title, meta data, and description.
The container for the video page text content elements, including the title, meta data, and description.
Unique Video Pages
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| #item-651f9c1a816ee47a39ccfa3f | Targets a unique video page using its ID attribute. The selector in the left column is just the general form of the collection ID, but the characters that come after "#item-" will be different for each element. |
|
HTML Structure Explanation
The <body> HTML element with an id attribute that corresponds to the specific video collection item.
The <body> HTML element with an id attribute that corresponds to the specific video collection item.
Related Videos Section
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .lessons-item-related-wrapper | The wrapper for the related video item elements including the title. |
|
| .lessons-item-related-title | The related videos title. |
|
| .lessons-item-related-item-list | The grid container of the video items. |
|
| .lessons-item-related-item-list .related-item | The individual video items. |
|
| .related-item-thumbnail | The thumbnail image. |
|
| .related-item-link-text | The text link below the video. |
|
HTML Structure Explanation
Here is the related video lessons wrapper with the class name “lessons-item-related-wrapper” and it’s descendant elements.
Here is the related video lessons wrapper with the class name “lessons-item-related-wrapper” and it’s descendant elements.
Pagination
Relevant CSS Selectors
If you want to select this element on any collection page, not just event pages, remove the attribute selector [data-collection-type*="events"].
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| General Selectors | ||
| .item-pagination[data-collection-type*="lessons"] | The item pagination container on video collection pages. |
|
| .item-pagination[data-collection-type*="lessons"] .item-pagination-link | The item pagination link containers on video collection pages. |
|
| .item-pagination[data-collection-type*="lessons"] .item-pagination-title | The item pagination title on video collection pages. |
|
| .item-pagination[data-collection-type*="lessons"] .item-pagination-icon | The container for the SVG vector images on video collection pages. |
|
| .item-pagination[data-collection-type*="lessons"] .item-pagination-icon svg | The SVG vector imagery in each of the item pagination link containers on video collection pages. |
|
| "Previous" Link Elements | ||
| .item-pagination[data-collection-type*="lessons"] .item-pagination-link--prev | The "Previous" item pagination link container on video collection pages. |
|
| .item-pagination[data-collection-type*="lessons"] .item-pagination-link--prev .item-pagination-icon | The container for the "Previous" SVG vector images on video collection pages. |
|
| .item-pagination[data-collection-type*="lessons"] .item-pagination-link--prev .item-pagination-icon svg | The SVG vector imagery in the "Previous" item pagination link containers on video collection pages. |
|
| .item-pagination[data-collection-type*="lessons"] .item-pagination-link--prev .item-pagination-title | The item pagination title for the "Previous" link on video collection pages. |
|
| "Next" Link Elements | ||
| .item-pagination[data-collection-type*="lessons"] .item-pagination-link--next | The "Next" item pagination link container on video collection pages. |
|
| .item-pagination[data-collection-type*="lessons"] .item-pagination-link--next .item-pagination-icon | The container for the "Next" SVG vector images on video collection pages. |
|
| .item-pagination[data-collection-type*="lessons"] .item-pagination-link--next .item-pagination-icon svg | The SVG vector imagery in the "Next" item pagination link containers on video collection pages. |
|
| .item-pagination[data-collection-type*="lessons"] .item-pagination-link--next .item-pagination-title | The item pagination title for the "Next" link on video collection pages. |
|
HTML Structure Explanation
The item pagination container on blog posts and it’s descendant elements. Every collection page will have a similar element to the pictured one below, but the “data-collection-type” attribute will reflect which collection type and layout is being used.
The item pagination container on blog posts and it’s descendant elements. Every collection page will have a similar element to the pictured one below, but the “data-collection-type” attribute will reflect which collection type and layout is being used.