I use and love ACF, but you can create this custom field however you wish, as long as it is easily updateable. We’ll use this to hide the buffering icon later. Optionally also create an image field to store a custom thumbnail image. The method Create a custom field to store the Youtube video ID. One of the biggest advantages of using the below technique though is the fact that it also allows videos to be autoplayed on mobile devices. The video will be cropped at some points particularly on mobile devices, but it will also adjust to any browser size on resize without showing the ugly black bars or Youtube’s branding. The method below takes care of these pitfalls and allows the video to act similarly to background:cover. You can also try using this method here, which is very effective, but does not cover the browser resizing aspect of it, or account for Youtube’s branding. If you are ok with serving a video at 16:9 resolution on all browser devices, you can simply use the padding bottom trick to do so. This issue, coupled with the workarounds you need to include for the browser to autoplay videos is why implementing video backgrounds is a lot more finicky than it sounds. Most videos filmed these days are 16:9, or 16:10. That is, the proportion between its width and its height. This is due to the fact that videos are restricted by its aspect ratio. Screenshot from with edits for demonstration purposes Instead you’ll get black bars, like below: When you resize the browser, regardless of any iframe styles, you’ll notice the video will not resize with the window. In fact, Vimeo provides responsive options in their embed code, which means you may not even need the following tutorial but simply their embed code.Įmbedding a Youtube video on a website is essentially embedding an iframe that loads a video. Their buffering and quality is amazing, and if you have a pro account you can also hide all branding which makes your life as a developer much easier. I often use Youtube because it is easier and has a well documented api, but if you have the means to do so, I highly recommend using Vimeo. They are also able to handle large video uploads and provides a video player that is far more robust than the default html5 video player. Not only will you save bandwidth by not uploading videos to your own site, these video services are also designed to serve videos optimally based on a number of factors including internet speed and device size. If you want to serve a video background reponsively, it’s a good idea to host it on a dedicated host such as Youtube or Vimeo. Sidenote: although this article is written around implementing full screen videos in WordPress, this method is easily transportable to other projects. I’ve even used one before, but I think this method is far simpler to implement and provides you a lot more control over where and how the video is served. There are plugins out there that can spit out a full page video for you in WordPress. I think it’s a pretty neat strategy I’ve used for a while now that just works, and it’s always been the most reliable solution that works across all browsers on desktop and mobile. Today, I wanted to share my technique on how I build video backgrounds on WordPress using Youtube.
0 Comments
Leave a Reply. |