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:
The number in the first part is the placeholder index. If you use multiple videos in a post you should use unique indexes:
 
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;
}
-
Tiara Digital Advertising
Found the plugin useful on 27 Jan, 2021
Super useful plugin.
-
Paolo M
Found the plugin useful on 6 Oct, 2018
Good plugin
-
Devin Green
Found the plugin useful on 14 Apr, 2017
awesome plugin. works flawlessly
-
Michael Wanyoike
Found the plugin useful on 2 Aug, 2016
This plugin works like a charm!
-
Andi Holzer
Found the plugin useful on 17 May, 2016
nice module and very usefull
-
Jorge andrade
Found the plugin useful on 22 May, 2015
How can i use this plugin?
-
Alex Bass
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
<div class="video-wrapper ratio-16-9"><iframe ...></iframe></div>whatever ratio it is. Worked perfectly, thanks for this quick tool! -
generic user
Found the plugin not useful on 11 Feb, 2015
For some reason, it is not working, thanks for the effort though.
-
Youngsoo-Yi
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
-
bestxp
Found the plugin not useful on 16 May, 2014
Crash cms after install this component
Class 'Cms\Twig\Extension' not found
-
| 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 |