Video Block Elements
COMPONENT SELECTOR GUIDE
Video Block Elements
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) |
|---|---|---|
| Outer Container | ||
| .sqs-block-video | The outer video block container. This selector will select all video blocks. |
|
| Video Elements (these do not refer to YouTube videos, because we cannot style YouTube iframe elements with CSS) | ||
| .sqs-block-video .plyr__video-wrapper | The parent container of the video element. |
|
| .sqs-block-video .plyr__video-wrapper video | The video element. |
|
| .sqs-block-video .plyr__poster | The thumbnail image of the video element. |
|
| .sqs-block-video .plyr__control | The overlay "Play/Pause" button that shows on the video. |
|
| .sqs-block-video .plyr__control svg | The vector imagery of both the play and pause icons. |
|
| .sqs-block-video .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. |
|
| .sqs-block-video .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. |
|
| .sqs-block-video .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. |
|
| .sqs-block-video .plyr__controls__item.plyr__time | The current time and the video duration text elements. |
|
| Text Elements | ||
| .sqs-block-video .video-caption | The video description container. |
|
| .sqs-block-video .video-caption p | The video description. |
|
HTML Structure Explanation
The container for the video elements on the video page.
The container for the video elements on the video page.
Unique Video Blocks Using the Block ID
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) |
|---|---|---|
| #block-yui_3_17_2_1_1690691237911_5006 | Targets a unique Squarespace element using its unique ID attribute. The selector in the left column is just the general form of the block ID, but the characters that come after "#block-" will be different for each element. |
|
HTML Structure Explanation
Every Squarespace block element, such as the Video Block, will have a class name of “.sqs-block”. This element will additionally have an ID attribute that begins with “block-” and ends with a random string of characters as pictured below.
A Video Block element with a class name of “sqs-block” and an id attribute.