Public Forums 71,145 posts

[felix1 Friend felix1Join date: February 2015Posts: 220Downloads:36Uploads:78 Thanks: 67 Thanked: 20 times in 6 posts]

#928540

I have a video module in mastcol with id=Mod238. How can I make it responsive?

---

Attachments:

1. 

Felix Rimfrost

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#928718

Hi
This is because the iframe code you are using have a fixed width so its not resizing the video in small layouts
Check the 3rd party extension configurations you are using for this and make the width 100% .
Hope it helps .

[waterback Friend waterbackJoin date: April 2016Posts: 31Downloads:4Uploads:19 Thanks: 1]

#929106

Hey,

create a custom html module and insert this: (replace the src with your video)

HTML:

<div align="center"> <iframe width="854" height="510" src="https://www.youtube.com/embed/LOREMIPSUM" frameborder="0" allowfullscreen></iframe>

Now go to /templates/purity_iii/css/custom.css (or create it) and insert this code:
CSS:

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-top: 1.5rem; 
} 

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

This is a common problem so you can just google for "make Iframe Responsive". The solutions should be adaptable to Purity 3 too.

Regards,
Marcel

[felix1 Friend felix1Join date: February 2015Posts: 220Downloads:36Uploads:78 Thanks: 67 Thanked: 20 times in 6 posts]

#930366

Thanks Marcel, but it didn’t work exactly as you described… 🙁

I changed following code in my custom HTML module:

<div class="embed-container"><iframe src="https://www.youtube.com/embed/lC6HTHINVVo" width="570" height="321" seamless="seamless" allowfullscreen="allowfullscreen"></iframe></div>

And I inserted following code in my custom.css:

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-top: 1.5rem; 
} 

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

What’s wrong?

Felix Rimfrost

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#930504

Hi
Flexi
please check my last suggest , you should use the width of iframe as 100% .
Becuase there is fixed width of iframe it use same width in all devices .

[felix1 Friend felix1Join date: February 2015Posts: 220Downloads:36Uploads:78 Thanks: 67 Thanked: 20 times in 6 posts]

#930512

I changed the embed code in my custom HTML module to:

<iframe src="[https://www.youtube.com/embed/lC6HTHINVVo](https://www.youtube.com/embed/lC6HTHINVVo)" width="100%" height="100%" seamless="seamless" allowfullscreen="allowfullscreen">

But now the module height is cut off? Why?

---

Attachments:

1. 

Felix Rimfrost

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#930651

This reply has been marked as private.

[felix1 Friend felix1Join date: February 2015Posts: 220Downloads:36Uploads:78 Thanks: 67 Thanked: 20 times in 6 posts]

#930677

Now the width is responsiv but the sides are cut off in mobile view. Isn’t there really any way to make the whole module responsiv!?

Felix Rimfrost

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#930842

This reply has been marked as private.

[felix1 Friend felix1Join date: February 2015Posts: 220Downloads:36Uploads:78 Thanks: 67 Thanked: 20 times in 6 posts]

#931776

But the sides are cut off! If you make an image responsive, it isn’t cut off, it’s just getting smaller.

Can you please answer me why the width of the video is cut in the custom HTML module?

Felix Rimfrost

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#931789

Hi
Give me screenshot and point the cutting part of iframe in screenshot .
You can see its showing normal >>> http://prntscr.com/b5cdgb

[Joomstack.com Friend Joomstack.comJoin date: December 2015Posts: 1Downloads:0Uploads:0]

#931875

Hi Felix
try this Its working for me . I am using 100%width for iframe .

www.joomstack.com

[felix1 Friend felix1Join date: February 2015Posts: 220Downloads:36Uploads:78 Thanks: 67 Thanked: 20 times in 6 posts]

#934214

Joomstack.com wrote:

Hi Felix
try this Its working for me . I am using 100%width for iframe .

Thanks Joomstack!
This is exactly what I wanted help with, and what Pankaj Sharma couldn’t help me with.

Now the video don’t get cut off on both sides. I wonder why Pankaj couldn’t see that!?

Felix Rimfrost

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#934220

HI
Great it worrk for u .thanks for update .

Thanks Joomstack

[Author]

Posts