Blog Video Extension

Adds responsive video embedding features to the RainLab Blog module.

53
  • 15 ratings
  • 10 reviews
  • 12,334 installations
Free

Product support

Visit this product's website for support.

  • Added on May 13, 2014
  • Current version: 1.1.2
  • Platform Compatibility
    v4.x not tested
    v3.x not tested
    v2.x not tested
    v1.x use latest
  • Created by
  • Public repository

Categories

Blog Video Extension

Adds responsive video embedding features to the RainLab Blog module.

This plugin extends the RainLab Blog plugin with the responsive video embedding features. The plugin was tested with Vimeo and YouTube videos, but in theory it can be used with any video service which uses iframes for embedding.

Adding video to a post

Use the following syntax to insert a video placeholder to a blog post:

![1](video)

The number in the first part is the placeholder index. If you use multiple videos in a post you should use unique indexes:

![1](video)

![2](video)

Installation via Command Line

php artisan plugin:install RainLab.BlogVideo

Styling the responsive videos

The plugin adds a wrapping DIV element around the embedded iframe element. The wrapper allows to make the video responsive, fit the containing column and maintain the aspect ratio.

<div class="video-wrapper ratio-16-9"><iframe ...></iframe></div>

Add the following CSS code to your website in order to support the video wrapper:

.video-wrapper {
    position: relative;
    padding-top: 25px;
    margin-bottom: 15px;
    height: 0;
}

.video-wrapper.ratio-5-4 {padding-bottom: 80%;}
.video-wrapper.ratio-4-3 {padding-bottom: 70%;}
.video-wrapper.ratio-16-10 {padding-bottom: 62.5%;}
.video-wrapper.ratio-16-9 {padding-bottom: 56.25%;}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
}

  • Found the plugin useful on 27 Jan, 2021

    Super useful plugin.

  • Found the plugin useful on 6 Oct, 2018

    Good plugin

  • Found the plugin useful on 14 Apr, 2017

    awesome plugin. works flawlessly

  • Found the plugin useful on 2 Aug, 2016

    This plugin works like a charm!

  • Found the plugin useful on 17 May, 2016

    nice module and very usefull

  • Found the plugin useful on 22 May, 2015

    How can i use this plugin?

  • Found the plugin useful on 28 Mar, 2015

    Works great! I wonder if people are actually reading the instructions... You must put these lines of code in your css:

    .video-wrapper {
    position: relative;
    padding-top: 25px;
    margin-bottom: 15px;
    height: 0;
}

.video-wrapper.ratio-5-4 {padding-bottom: 80%;}
.video-wrapper.ratio-4-3 {padding-bottom: 70%;}
.video-wrapper.ratio-16-10 {padding-bottom: 62.5%;}
.video-wrapper.ratio-16-9 {padding-bottom: 56.25%;}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
}

    And then you must call out to &lt;div class=&quot;video-wrapper ratio-16-9&quot;&gt;&lt;iframe ...&gt;&lt;/iframe&gt;&lt;/div&gt; whatever ratio it is. Worked perfectly, thanks for this quick tool!

  • Found the plugin not useful on 11 Feb, 2015

    For some reason, it is not working, thanks for the effort though.

  • Found the plugin not useful on 1 Jul, 2014

    This doesn't work. Broken image shows up instead of youtube video.

    Version information

    octobercms 113
blog 1.0.5
blogvideo 1.0.1

  • Found the plugin not useful on 16 May, 2014

    Crash cms after install this component

    Class 'Cms\Twig\Extension' not found

  • Please login to rate the plugin or write a review.
1.1.2

Update toolbar icon.

May 26, 2016
1.1.1

Minor styling update.

May 26, 2016
1.1.0

Adds a new Video button to the Markdown editor toolbar.

Aug 07, 2015
1.0.2

Fixes issue where videos cannot be uploaded caused by latest Markdown library.

Feb 13, 2015
1.0.1

Initialize plugin

May 13, 2014