iFrames appearing skewed

This topic has 12 replies, 2 voices, and was last updated 7 years, 8 months ago by Mahesh.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
March 22, 2017 at 8:13 am #112579

mmarcus
Participant

I am building a site with Helena that has a lot of iFrames in it from different sources. Despite the dimensions in the iFrame snippet being correct, they all appear with the wrong ration – appearing long and thin instead of rectangular.

I have tried on posts and pages with iFrames from youtube, soundcloud and other places and it is the same with all of them.

Can anyone advise how to get them to appear in the right size as it is key to my site?

examples can be seen here: http://itsthelisteningthatcounts.axnscollective.org/city-sounds/

March 22, 2017 at 11:04 am #112599

Mahesh
Participant

@mmarcus: Above link sends to login page.

Regards,
Mahesh

March 22, 2017 at 11:48 am #112609

mmarcus
Participant

@Mahesh

Oh, sorry about that.

Here are some screenshots and the code i am using is below too

<iframe src=”http://aporee.org/maps/work/export/?swlat=51.464061&swlng=-0.346413&nelat=51.550605&nelng=0.090981&z=12&m=hybrid&w=1274&h=455″ width=”1274″ height=”455″></iframe>

<iframe src=”https://www.youtube.com/embed/CAl2OyU2tnY” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe><iframe src=”https://www.youtube.com/embed/VamQSEW7KAw” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
<iframe src=”https://www.youtube.com/embed/wRCJGz0NUb4″ width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

March 22, 2017 at 11:49 am #112610

mmarcus
Participant

@Mahesh when i put the same code into another wordpress site I run which has a different theme it displays with the correct dimensions.

March 23, 2017 at 3:10 am #112678

Mahesh
Participant

@mmarcus: Theme has responsive video support from Jetpack plugin. So, don’t embed video like that. Just add in the video URL in your post editor and it will work fine.
Just add like:
https://www.youtube.com/watch?v=CAl2OyU2tnY

Regards,
Mahesh

March 23, 2017 at 3:43 am #112688

mmarcus
Participant

Hi @Mahesh, thanks for getting back to me.

I have tried that but the media still appears cropped, just at full width of the page:

It is really important I can get the media appearing on the page with the right dimensions and I need to resolve the issue quickly I am afraid as I am on deadline. Any help you can give me would be grately appreciated.

March 23, 2017 at 4:53 am #112694

Mahesh
Participant

@mmarcus: Test the YouTube link on our server, and its is working fine. If you have are using any plugins please try disabling theme and try again.

Regards,
Mahesh

March 23, 2017 at 6:08 am #112696

mmarcus
Participant

@mahesh I only had one to pull a facebook feed and to put the site behind a login. I deactivated both and it hasn’t made a difference.

March 23, 2017 at 6:27 am #112699

mmarcus
Participant

@mahesh I have made the site public so you can have a look at it. The really important one is this one:

<iframe src=”http://aporee.org/maps/work/export/?swlat=51.464061&swlng=-0.346413&nelat=51.550605&nelng=0.090981&z=12&m=hybrid&w=1274&h=455″ width=”1274″ height=”455″></iframe>

which can be found on this page:

http://itsthelisteningthatcounts.axnscollective.org/city-sounds/

Thanks again.

March 24, 2017 at 9:12 am #112789

mmarcus
Participant

@Mahesh I am sorry to chase but I am really keen to see if I can resolve this issue today. Have you any other suggestions?

March 26, 2017 at 2:28 am #112890
Mahesh
Participant
@mmarcus: Sorry for the late reply, go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS:
```
embed, iframe, object, video {
    height: 500px;
}
```
Note: Pleaese adjust the height as desired.
Let me know if any problem.

Regards,
Mahesh
March 26, 2017 at 5:14 am #112898

mmarcus
Participant

@Mahesh That has worked a treat. Thanks!

March 26, 2017 at 6:27 am #112904

Mahesh
Participant

@mmarcus: Thank you for your appreciation. Have a nice day!

Regards,
Mahesh
Author

Posts