Notifications
Clear all

[Solved] YouTube embed not correct in proportions

15 Posts
7 Users
3 Reactions
3,317 Views
Posts: 7
Customer
Topic starter
(@happysnappers)
Member
Joined: 6 years ago

I have the same issue a few people have had with the Embed plugin, that embedded video's from YouTube do not present correctly at all by just applying the link.

They appear full width on the forum, but only maybe 150 pixels high!

As a workaround I have the settings to 600 px high & width to 0, but that breaks on a mobile phone & will not work for every-bodies different sizes of browsers on their screens.

If I make the setting 100% high, it does not work, it appears maybe 150 px high.

Any help?

https://happysnappersadelaide.com/community/postid/4/

is the video.

Before you tell me to disable the YouTube plugin like you have everyone else, I don't have one! 🙂  

14 Replies
Posts: 55
Customer
(@wafadul)
Member
Joined: 7 years ago

this has also been a problem of mine since i purchased the addon more than a year ago.

facebook and dailymotion videos embed properly, responsively while they can't seem to make the same for youtube - which just happens to be the primary source of videos for most of us.

here's hoping that they fix the issue asap, once and for all.

 

 

 

 

Posts: 1
(@fin3than)
New Member
Joined: 2 years ago

Any solution for this problem? I would like to make my embedded youtube responsive. Yes, I purchase the Embed plugin.

Posts: 29
Customer
(@joselito)
Member
Joined: 3 years ago

Me too.

Posts: 4214
 Tom
Admin
(@tomson)
Famed Member
Joined: 10 years ago

Hello,

There is a good solution using a small css code. Please navigate to Dashboard > Forums > Settings > Styles Tab, put the CSS code in the Custom CSS Code textarea, save it, delete all kind of caches, purge all kind of CSS optimizer and CDN caches.

If you check it on a mobile devices make sure you use a new private/incognito tab in the mobile browser, otherwise you'll see a cached version, mobile devices have a hard cache, and you'll not be able to see the result:

#wpforo #wpforo-wrap .wpf-embed{height: auto !important;}
#wpforo #wpforo-wrap .wpf-embed iframe{aspect-ratio: 16 / 9; height: auto !important;}
Page 1 / 3
Share:
Scroll to top