With Flothemes you can add video to your content anywhere with the video shortcode option. Flo Shortcodes allows you to add responsive videos into standard posts (Also pages).

To add a video post, you can follow these steps:

Step 1 – Page or Post

Go to a post or page you want to add a video.

Step 2 – Add Video Shortcode

When inside the post or page, if you have installed the Flo Short-codes plug-in and its up to the most recent version (you can check here) you will have the option to insert a responsive video:

Add the URL in the Video URL section, the links from the major video providers will be automatically recognised and rendered. You can check here the full list of supported services. Then insert shortcode.

You will then have a shortcode that looks like the following:

[flo_video] https://vimeo.com/83991550 [/flo_video]

You can add as many as you’d like in a post. If you want to show only video posts on a single page, then make sure to add a specific category to these posts.

Step 3 –  Publish

Once you’re done you can publish your post, save as a draft or set a time for the video to be published. The option will be at the top right:

You can read more from the WordPress Codex on using embedded content in your site at the link below:

https://codex.wordpress.org/Embeds

With the most recent version of WordPress the oEmbed feature is added, this will create a standard embed of your videos and you will be able to preview this in the visual editor.

Simply copy and paste the URL of the video source into your content for this to work.

While we’ve added the responsive video option to our shortcode plugin, it will only work with video embeds from Vimeo and Youtube. You can use Embed Responsively to create responsive iFrames, embeds amongst some other options, its very useful. The process itself is very simple, i’ll show an example from Vimeo:

Step 1 – Get Embed or Vimeo Link

To get a regular share or embed link from Vimeo, click the “Share” button below the video. You’ll then get a pop up with 2 options, a link or an embed:

If you’re using the share link, you can simply paste the code into WordPress:

The only issue with this is that is will give a black margin top and bottom when on smaller devices. To remove this, we will use Embed Responsively.

Step 2 – Embed Responsively

Go to Embed Responsively and simply paste your code in their site, making a selection based on the type of content you’re embedding, for example the same Vimeo video will produce a code:

Step 3 – Add Code

Now you’ve generated a code paste it into the page or post in WordPress, update the post and check out your new responsive video.