Video
If you open the video on YouTube, you can find the chapters of the different settings in the description.
YouTube or Vimeo
When it comes to videos on websites, you almost always want to use some kind of service, usually YouTube or Vimeo. I would recommend Vimeo, because it is one of the main features of this service, and they are happy that you use it this way. On the other hand, YouTube is very unhappy about putting videos outside their domain and will always make it more difficult and less capable.
Adding a video player
Premium Minimalio adds custom Gutenberg blocks for you, those are Vimeo and Youtube iframes. You can use those to add video players to your website. Always add an ID of your video and choose an aspect-ratio of your video. Vimeo iframe block also adds an option of covering your player with an image and a big play button.
Adding a video banner
A video banner is a section of the website, where video plays automatically, with play/pause and mute buttons. This is especially cool for setting it as a homepage, which is fully covered by your video. Both available with Vimeo and YouTube, but Vimeo again is better. The Gutenberg blocks are called Vimeo banner and YouTube banner. If you want to use the banner to cover your whole homepage, go to Minimalio options -> Header and enable transparent header on your homepage.
Embedding a video
In case that you don’t want to use the custom Minimalio Gutenberg blocks, you can also embed your videos. Find the sharing options in Vimeo or YouTube, and get the Embed HTML code for your video. Then use the Gutenberg block called Custom HTML. Paste your embed code in there.
Transcription of the video
Hi there! Today, I’d like to talk about having videos on your website. Unfortunately, WordPress, particularly Gutenberg, is not great at handling videos. I’m not sure why, but I wanted the Minimalio theme to be highly capable when it comes to videos, especially since I come from a film background.
When it comes to videos, you almost always want to use a service like YouTube or Vimeo to host them. While YouTube is popular, I highly recommend using Vimeo if possible. Vimeo is designed for video hosting and doesn’t push ads like YouTube does. While YouTube wants users to stay on their platform to watch ads and gather data, Vimeo offers a more professional experience, often ad-free, with more customization options.
The easiest way to add a video to your site is by using an iframe. You can do this by searching for either ‘Minimalio,’ ‘iframe,’ ‘Vimeo,’ or ‘YouTube’ in the Gutenberg block options. I’ll start by showing you how to add a Vimeo iframe, and then I’ll move on to YouTube.
For Vimeo, select the Vimeo iframe block, and then choose the video you want to display. You only need to enter the video’s code number, not the full URL. Once you add the code, the video will appear on your page. You can then adjust the aspect ratio to ensure the video is responsive across all devices. There are a few options for customization. You can hide the video title and information displayed on the video, but this needs to be done directly in Vimeo. I’ve also added a feature in Minimalio that lets you cover the iframe with an image. You can select an image, choose a color using a hexadecimal code, and it will display a large play button over the image. When clicked, the video starts.
For YouTube, the process is almost the same. Just choose the YouTube iframe block and enter the video’s ID, which is the part of the URL after the equal sign. With YouTube, only the aspect ratio can be adjusted—there are fewer customization options than with Vimeo.
Another advanced feature I developed is called the ‘Banner’ block. This is perfect for creating a full-screen video background, like on the homepage of the Tony demo site. The video covers the entire page, offering a dynamic and immersive experience. To create a full-page video banner, select the Vimeo Banner block in Gutenberg. You can enter the video URL directly and set an optional background image. The background image is useful because it displays while the video loads, creating a smoother transition. You can also set the video to full width and height, enabling it as the homepage background. If you’re using YouTube for the banner, the setup is similar, but there’s no option for a background image. You can also set a custom height using VH (viewport height) units. This lets you show part of the page content below the video by adjusting the percentage of the screen height that the video occupies.
There’s also an option to display Vimeo videos in a lightbox within the portfolio section. I’ve covered how to set this up in the portfolio page tutorial video, so please check that out for more details.
If the iframe or banner options don’t meet your needs—for example, if there’s no correct aspect ratio for your video—you can use the ’embed’ option provided by both Vimeo and YouTube. By copying the HTML embed code from the share options, you can paste it into a ‘Custom HTML’ block in Gutenberg, which works just as well.
That’s it! I hope this guide helps you integrate videos seamlessly into your Minimalio website. Thanks for watching!