In this article, we will add a video and make it responsive for your product page.
Step 1 - Add an accordion on your Product page
Step 2 - Set it at Custom content
Step 3 - Copy/Paste the iframe-container div
Copy/paste the following code and add it to your custom content:
<div class="iframe-container">
</div>
Step 4 - Copy/Paste your video embed code
After doing so, time to get your video embed code:
Copy your youtube video embed code, here is a tutorial.
Step 5 - Make the video responsive
It's time to insert the Custom CSS in your theme settings now. Copy-paste the CSS below:
.iframe-container {
overflow: hidden;
/* 16:9 aspect ratio */
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
Final result
After doing all the implementation of the code, here's the final result: