Re: Add Play Button Icon to Video in Multicolumn

bridgettdavis85 · ‎03-05-2024

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?

Sassa140 · ‎03-05-2024

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:

<title>Video with Play Button</title>
<style>
.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;
}
</style>
</head>
<body>

<div class="video-container">
<div class="video-column">
<video controls>
<source src="video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="play-button"></div>
</div>
<div class="video-column">
<video controls>
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="play-button"></div>
</div>

</div>

</body>
</html>

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.

bridgettdavis85 · ‎03-05-2024

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

Re: Add Play Button Icon to Video in Multicolumn

Add Play Button Icon to Video in Multicolumn

Community Blog Articles