Markup and styles for feature video module #23
Conversation
dmontesi
commented
Jan 21, 2026
dmontesi
commented
- Add markup and styles for new feature video component
✅ Deploy Preview for imarc-pronto ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This pull request adds markup and styles for a new feature video component that displays a video with a lazy-loaded placeholder image and play button, overlaid on a colored background with text content below.
Changes:
- Added new
featureVideoSCSS module with grid-based layout and responsive styling - Created HTML template demonstrating the feature video component with lazy loading functionality
- Integrated the new module into the SCSS molecules index
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| resources/styles/molecules/index.scss | Added forward declaration for the new featureVideo module |
| resources/styles/molecules/featureVideo/index.scss | New SCSS file with complete styling for the feature video component including grid layout, responsive design, and media queries |
| resources/styles/molecules/featureVideo/featureVideo.html | New HTML template demonstrating the component structure with lazy-loaded video, placeholder image, and content sections |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div class="featureVideo__content"> | ||
| <h3 class="featureVideo__title h3">Heading Placeholder</h3> | ||
| <p class="featureVideo__text"> | ||
| Signissim lacus in eros convallis porta. Pellentesque hendrerit neque a |
There was a problem hiding this comment.
The placeholder text "Signissim" appears to be a typo or nonsensical word. If this is meant to be Lorem Ipsum placeholder text, consider using standard Lorem Ipsum text or a more recognizable placeholder pattern. If "Signissim" is intentional, please verify the spelling.
| Signissim lacus in eros convallis porta. Pellentesque hendrerit neque a | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit neque a |
| <div class="featureVideo__media"> | ||
| <div class="media"> | ||
| <p-lazy> | ||
| <video class="media__content" inert controls autoplay playsinline> |
There was a problem hiding this comment.
The inert attribute should not be used alongside controls on a video element. The inert attribute makes the element and all its descendants non-interactive, which conflicts with the controls attribute that provides interactive playback controls. Remove the inert attribute to allow users to interact with the video controls.
| <video class="media__content" inert controls autoplay playsinline> | |
| <video class="media__content" controls autoplay playsinline> |
| <div class="featureVideo__media"> | ||
| <div class="media"> | ||
| <p-lazy> | ||
| <video class="media__content" inert controls autoplay playsinline> |
There was a problem hiding this comment.
The autoplay attribute on videos can create accessibility issues for users with cognitive disabilities and those using screen readers. Additionally, autoplaying videos without user interaction may violate WCAG 2.1 Success Criterion 2.2.2 (Pause, Stop, Hide). Consider removing the autoplay attribute and letting users explicitly initiate video playback through the play button interface that's already implemented with the lazy loading placeholder.
| <video class="media__content" inert controls autoplay playsinline> | |
| <video class="media__content" inert controls playsinline> |
| <picture class="media__mask" :class="modifier"> | ||
| <img | ||
| srcset="https://unsplash.it/960/540?random&gravity=center" | ||
| alt="" |
There was a problem hiding this comment.
The alt attribute is empty for the placeholder image, but this image serves a functional purpose as a video thumbnail/poster. Provide a descriptive alt text that describes what the video is about, such as "Video thumbnail" or a more specific description of the video content. If this is truly decorative in all contexts, consider using role="presentation" to clarify the intent.
| alt="" | |
| alt="Video thumbnail" |
| <button class="media__trigger" @click="load" :class="modifier"> | ||
| <span class="srOnly">play</span> | ||
| <svg class="media__icon icon -circle" viewBox="0 0 96 96"> | ||
| <use href="/main-icons-sprite.svg#play" /> | ||
| </svg> | ||
| </button> |
There was a problem hiding this comment.
The play button uses .srOnly for the text "play", but the button lacks an accessible label attribute. Add an aria-label="Play video" to the button element to ensure screen readers announce the button's purpose correctly, as relying solely on visually hidden text within a span may not be sufficient in all screen reader configurations.
