Content Widget: How to Add a Custom Video Embed

How To  Tutorials  Last Updated: Time to Read: 3 minutes

This tutorial will walk you through using a video embed code to display a customized video in the Layers Content Widget without additional plugins. There are otherwise several free and premium plugins that offer easier ways to customize video players and insert them into Layers pages via shortcodes or widgets, such as the ViMuse Layers Extension or the Master Slider plugin.

By default, the widget’s Featured Media option in the column toolbar will let you add any link to content that uses oEmbed, such as YouTube, Vimeo, Twitter or SoundCloud share links. This feature uses oEmbed to automatically embed your content in a responsive way. See How to Embed Audio & Video with Layers for a basic overview of using video with Layers featured media.

While oembed ensures your embedded content is mobile-friendly, it has some drawbacks in that it doesn’t allow for advanced customization of the video player. There are times when you may want to  remove the related videos on YouTube or auto-start the video, for example. This can be done through the Embed options using the embed controls the service offers, or with free online tools such as this simple one by developer Vladimir Sobolev. To do it yourself, see Google’s guide to YouTube URL parameters or  help with vimeo embeds.

In this example, we will use YouTube, and an educational video from Ted on camels.

Traditional

  1. Open the video on YouTube
  2. Click the Share link in the player toolbar below the video
  3. Click the Embed tab
  4. Click Show More below the default embed code
  5. Select a Video Size – for best results, 1280×768 offers the best quality
  6. Check or uncheck the options for related video, etc.
  7. Copy the embed code or “iframe tag”

Custom

  1. Copy the video code at the end of your video URL. For our camel video, it is c9V6OKlY80k
  2. Go to Vladimir Sobolev‘s tool and paste the code at the top
  3. Choose HTML5 from the version drop-down
  4. Customize the remaining options as deisred
  5. For full-size video, enter 1280  in the width box, and 768  in the height box.
  6. Copy the embed code on the right
  1. From your Edit Layout screen in the customizer, click +Add a Widget and select the Content widget
  2. Edit the Title and Description as desired, or remove them
  3. In the first Column, click the Column width columns-iconoption in the toolbar and choose 12 of 12
  4. Edit or remove the Title
  5. Click the code button on the Excerpt editor toolbar </>
  6. Paste your embed code
    • video-embed
  7. Click the code button again to switch back to visual editing.
  8. To delete the additional default columns, expand them and click the red trash-can icon.

Video players embedded this way are not responsive by default, as they define a specific height and width in pixels. This means the video will display a player that is the dimensions you define in your embed code. To ensure the video scales on mobiles, you will need to add some custom styling to the widget. This is easiest with the DevKit plugin, which does the heavy lifting:

  1. Click the Advanced option on the Design Bar of the widget
  2. In the Custom Class field, add mobile-video
  3. In the Custom CSS field, add
  4. Open DevKit from the customizer toolbar and click on the mobile view and add
  5. Click on the Tablet view and add
  6. Save Changes

If you do not have DevKit, you can use the codes in step 3-5 above in custom mobile media queries explained here:

How to Customize the Mobile or Responsive Views