If you want to share multimedia content with your reader users, in this case a YouTube video , we will teach you how to do it in simple steps.
In this tutorial we will show you how to add the video in the Widgets section , but if you have knowledge of HTML, CSS and JavaScript you will be able to insert it in other sections of the store.
1. The first thing you should do (in case you have already done it) is to upload your video to YouTube . Once it is loaded there, you must copy the link that YouTube provides you to be able to embed the video in the store.
To obtain the link you must enter the link of the video and click on " Share ":
2. There click on "Incorporate".
3. The following window will open where we will have the code to incorporate:
Copy the code as shown in the image.
4. Now from the store, go to Control Panel > Settings > Widgets and paste the obtained code, wrapping it in the following tag:
<div class="video-responsive">
Aquí dentro debes colocar el código de Youtube
</div>
The code should look like this:
<div class="video-responsive">
<iframe width="560" height="315" src="https://www.youtube.com/embed/mPsc8c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Click Save .
5. Finally, we'll add some CSS styles to center the video and give it some headroom. For this you must enter Control Panel> Settings> Advanced and check if you have the Custom CSS box.
- If you have the Custom CSS box, paste the following code:
.Widget .container-fluid{
text-align: center;
margin-top: 9px;
}
- If you do NOT have the CSS box , you must paste your code in Custom before </body> code as follows:
<style>
.Widget .container-fluid{
text-align: center;
margin-top: 9px;
}
</style>
Click Save.
Maybe some label has some error and that's why the code doesn't work. To solve it, check that the code is correct and as we share it with you in this tutorial.
We hope this tutorial has been easy for you. If you have questions, write to us at [email protected] .