How to Create a YouTube Embed Plugin for WordPress

Originally published at: http://www.sitepoint.com/create-a-youtube-embed-plugin-for-wordpress/

YouTube is the most popular video sharing platform. As everyone knows, they also lets us embed its videos on our websites. But just taking the embed code and pasting in our site is not enough. It’s not responsive and adds a lot of unnecessary weight to our pages. Due to these issues, users are unlikely to play the videos and we risk them leaving our site.

In this tutorial I’ll show you how to create a YouTube embed plugin which provides a shortcode to add YouTube videos responsively without increasing the weight of the page.

WordPress Default Embeds

WordPress by default, converts YouTube URLs into embed code (using oEmbed) in the post editor.

Continue reading this article on SitePoint

Dislike - you are copying native wordpress functionality, with much worse experience for editor (no preview, need for useless shortcode …) and why? Just because you want your youtube to be responsive? This can be FAR more easier - simply use embed_oembed_html or oembed_result filter, and modify the HTML produced by the native wordpress oembed. It is generaly one row formula. E.g. if you are using twitter bootstrap and are preparing 16 by 9 videos, you can simply enclosed the produced embed code to div with class “embed-responsive embed-responsive-16by9” and it will automagicaly fit available place.

@Tomas_Kapler If you read the tutorial then you must have seen how youtube impacts page speed. This plugin address both these problems. You cannot load videos dynamically using the filter. WordPress filters just provide some level of customization. You can further extend the plugin to customize the attributes of the player.

You can see this plugin https://wordpress.org/plugins/embedplus-for-wordpress/screenshots/ how it has a lot of other functionalities. Here we are trying to achieve customization without touching WordPress default behaviour.

If you still think there is a better way to load youtube videos dynamically then leave your comment.

Thank you! Is this applicable to Facebook video embed codes as well?

@teighlorre No this plugin is only for youtube videos.

Facebook videos are by default responsive. Facebook embed code takes care of it. To load facebook videos dynamically you can tweak the facebook embed code instead of creating a plugin.

@Tomas_Kapler You are right with what you said.

More often than not, we miss the aim of tutorials of this nature. Although they seems to reinvent a wheel, but they are written to show us how things can be done and in this case, how a peculiar kind of plugin can be developed in WordPress.

More grease to your elbow @narayanprusty.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.