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.
32

Hi,

This has been very useful and just what I was looking for.

I just have a couple of questions…

  1. For me, changing the size of the video doesn’t work most of the time, does anyone else have this issue?

  2. there seems to be padding on the left and right, so when I change the theme colour, there are white columns either side of the block, how can I fix this?

  3. is it possible to add all the editing options that are available for the image with text section?

e.g. content overlap, padding etc.?

Thanks in advance :blush: