How can I create a video with text section in the Dawn theme?

Store Design

Topic summary

Users are seeking to create a “Video with Text” section in Shopify’s Dawn theme, similar to the existing “Image with Text” section, with autoplay and loop functionality.

Primary Solution:

  • User vincentdh hired a coder and shared complete code for creating video-with-text.liquid and component-video-with-text.css files
  • This involves duplicating the “Image with Text” section structure and replacing image elements with video elements

Common Issues & Fixes:

Mobile Display Problems:

  • Videos not appearing on mobile devices
  • Fix: Add CSS code to base.css making video position relative on screens under 749px

Video Freezing:

  • Videos stop when selecting product variants
  • Solution: Remove specific code from media-gallery.js (line 84) that pauses all media
  • Alternative: Add play/pause buttons for manual control

Additional Improvements:

  • User Spac-es provided enhanced code with play/pause buttons, better mobile animations, and additional customization options (alignment, captions, color schemes)
  • Audio controls can be enabled by adding controls="true" to the video tag

Ongoing Requests:

  • Removing padding/white space around videos
  • Adding colored backgrounds to text sections
  • Making videos full-width
  • Creating video columns without text

The discussion remains active with users requesting help for specific customization needs and styling adjustments.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
91

i see, well maybe you can help me further to figure this out. I got the idea of video and text section from this website https://thevortix.com/products/vortix-smart-car-vacuum-air-blower and they have that feature where the video is on autoplay and it works on mobile. Maybe you can check their code and see the difference for the solution. thanks

1 Like