Add Play Button Icon to Video in Multicolumn

Shopify Discussion
,
1

I have created my own section my multicolumns that have video. I do no not like the video controls on the video. I want there to be a button they press like a play button on the video section. Can anyone help me code this?

2

To add a play button icon to a video in a multicolumn layout, you can use HTML and CSS. Here’s an example code snippet:

Video with Play Button .video-container { display: flex; flex-wrap: wrap; justify-content: center; }

.video-column {
flex: 1 0 30%; /* Adjust the width of columns as needed */
margin: 10px;
position: relative;
overflow: hidden;
}

.video-column video {
width: 100%;
height: auto;
}

.play-button {
width: 60px;
height: 60px;
background: url(‘play-button-icon.png’) no-repeat center center;
background-size: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}

.play-button:hover {
opacity: 0.7;
}

In this code:

  • Replace “play-button-icon.png” with the path to your play button icon image.
  • Replace “video1.mp4” and “video2.mp4” with the paths to your video files.
  • Adjust the width and height of .play-button class as needed.
  • You can add more video columns by duplicating the div with the class video-column.

This code creates a multicolumn layout using flexbox and Sassa. Each column contains a video element and a play button icon positioned in the center. Adjustments can be made to the styling and layout to fit your specific requirements.

1 Like
3

Thank you for this! Now where do I put this? I already created my custom section. liquid file and also my section CSS. So do I still need this entire code because the column widths are already set, I just want to replace the video controls with the play button