How to insert responsive youtube iframe on CMS pages

[rl_lucian]

To insert insert responsive youtube iframe on CMS pages please follow this steps:

1) Go to Admin -> Preferences -> General 

- Allow iframes on HTML fields set to -> Yes

- Use HTMLPurifier Library set to -> No

 

2) Go to -> Preferences -> CMS -> edit the CMS page you want to insert iframe in -> click on Source code icon -> paste the code from below -> click Save

<div class="video-container"><iframe width="300" height="150" src="https://www.youtube.com/embed/h4s0llOpKrU?rel=0&amp;showinfo=0" frameborder="0"></iframe></div>

 

3) Go to custom CSS folder -> paste the below code -> click Save

 

.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
 

Now, if you check that CMS page, should have a responsive youtube video integrated.

[nickcoleman]

Awesome post, this works perfectly.

[HammerPerf]

On 12/6/2017 at 2:47 AM, rl_lucian said:

3) Go to custom CSS folder -> paste the below code -> click Save

 

Can you tell me where to find this file in 1.7? Everything else about your explanation is straightforward, but I have no idea where to put the CSS code. I can't find any folder named anything like that, nor would I know what file to add the code to assuming I could find the folder.

I tried embedding it in the source code when editing the CMS page content, but it gets ripped out as soon as I hit Save.

 

ON EDIT: I found it. For anyone reading this in the future, the file is /themes/[theme name]/assets/css/custom.css. This modification worked like a charm for me, I now have a responsive Youtube video on one of my CMS pages. Thanks Lucian!

One other word of warning. "Save and preview" after modifying the CMS page, it didn't work. I had to do an explicit reload on the browser (Firefox) for it to start working. Same deal on both the PC and phone. So don't be fooled.

Edited May 13, 2019 by HammerPerf (see edit history)

[Vico_b]

You could have quoted your source mate...

 

https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed