In the past years, a lot of new trends have emerged in web designing and development. For sure, one of the most noticeable changes is responsiveness. Web sites, shops and apps are obliged to get the most out of every available device in order to attract the most visitors or customers!
Prestashop has followed the masses and implemented bootstrap in version 1.6! Since then, Prestashop is out of the box ready for all kind of screens, tablets or mobile phones! Most of the available themes are also responsive!
But still there is an issue with the content that your shop’s administrators add through the default WYSIWYG editor available all around the admin! In simple scenarios, where the admin just adds a few paragraphs, let’s say in a product’s description, everything remains responsive!
But what about more advanced content like videos? Sadly responsiveness is lost, and your clients cannot add videos to their shop without the risk of messed up layouts in the frontend! So, let’s get to work, and let’s find a solution!
While brainstorming and googling, a bunch of ideas crossed my mind and my monitor. Maybe some css rules or html wrappers could save the day. But they can’t! The most important aspect of the problem is that usually shop admin’s are non-tech users and they need the simplest of all the solutions!
So, what we need is to allow them to embed their videos from Youtube, Vimeo or any other video provider through the default editor, and without special guidelines!
The rest of this article, will help you accomplish the above the clean way, in a few simple steps! So, let’s get started!!
First of all, we need to configure Prestashop to allow iframes into the editor! To do so, go to Preferences > General and check the option “Allow iframes on HTML fields”.
Now, we need to add a little bit of Javascript! Go to your shop’s theme folder and locate the folder js that contains your theme’s javascript! Locate the folder autoload, which contains the javascript that gets loaded in all the pages of your shop! Create a new file, for example responsive-videos.js. Open the file with your favorite editor. Copy the following code into it and save it!
$(document).ready(function(){
// Select all videos ( add as many video providers as you want )
var $videos = $('iframe[src*="//www.youtube.com"],iframe[src*="//player.vimeo.com"]');
// Figure out and save aspect ratio for each video
$videos.each(function() {
// Save the aspect ratio
$(this).data('aspectRatio', this.height / this.width)
// Remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized, we have to resize our videos
$(window).resize(function() {
// Resize all videos according to their aspect ratio
$videos.each(function() {
var $currentVideo = $(this);
// Get parent element width
var newWidth = $currentVideo.parent().width();
// Assign width and height
$currentVideo.width(newWidth)
.height(newWidth * $currentVideo.data('aspectRatio'));
});
// Trigger one resize to treat videos on page load
}).resize();
});
The code is explained in detail in the included comments, so, I will not analyze it further! I suggest that you leave the comments intact, in order to have a reference in the future, in case you need to change things!
Well, you are ready to go!!
Simply, go to Youtube or Vimeo and grab the embed code for a video. Choose to get the biggest available size! Now, go to your Prestashop Products, locate a product and go to its description. Use the “Insert/Edit Video” button and paste the embed code in the textarea of the “Embed” tab! Save your changes and visit the product in the frontend!
