Notifications

Clear all

Limited Support

Our team is currently on holiday, so support will be limited during this period. Response times may be slower than usual, and some inquiries may be delayed. We appreciate your patience and understanding, and we’ll resume our usual support by the end of August.

Embeds not displaying properly (Twitter, Instagram, YouTube)

Page 1 / 2 Next

wpDiscuz Embeds

Last Post by Nate Lundy 2 years ago

8 Posts

2 Users

0 Reactions

2,258 Views

RSS

Posts: 11

Nate Lundy

Customer

Topic starter

Mar 31, 2023 11:26 pm

(@nate-lundy)

Member

Joined: 2 years ago

Trying to get Embeds working, and all 3 of our current tests are not displaying properly:

Instagram: very wide and very short embed, cuts off the majority of the content: https://go.benish.io/2zBDnwlw
YouTube: a similar aspect ratio, where the embed fills the comment area, but the height is absurdly short, which cuts off most of it. There is also a ton of empty space under the YouTube embed: https://go.benish.io/sHd9MM7p
Twitter: right side is cut off: https://go.benish.io/SZ84b1ws

Embeds settings: https://go.benish.io/qgWJHKP7

You can see these examples at: https://ds.milehighsports.com/2023/03/23/preview-nuggets-finish-road-trip-against-wizards/#comments

7 Replies

Posts: 6450

Astghik

Admin

Apr 03, 2023 12:48 pm

(@astgh)

Illustrious Member

Joined: 8 years ago

Hi Nate Lundy,

Do you have other embedding plugins?

Posts: 11

Nate Lundy

Customer

Topic starter

Apr 03, 2023 9:59 pm

(@nate-lundy)

Member

Joined: 2 years ago

Nope, no other embed plugins.

Posts: 11

Nate Lundy

Customer

Topic starter

Apr 03, 2023 10:01 pm

(@nate-lundy)

Member

Joined: 2 years ago

URL for that test post has changed since my first message:

Instagram embed: https://ds.milehighsports.com/preview-nuggets-finish-road-trip-against-wizards/#comment-42

YouTube embed: https://ds.milehighsports.com/preview-nuggets-finish-road-trip-against-wizards/#comment-40

Twitter embed: https://ds.milehighsports.com/preview-nuggets-finish-road-trip-against-wizards/#comment-41

1 Reply

Astghik

Admin

(@astgh)

Joined: 8 years ago

Illustrious Member

Posts: 6450

Apr 04, 2023 1:05 pm

Reply to

Nate Lundy

Nate Lundy,

Please use the CSS solution below:

#wpdcom .twitter-tweet.twitter-tweet-rendered {
   max-width: 100% !important;
}
#wpdcom iframe.instagram-media.instagram-media-rendered {
   min-height: 950px;
}
.video iframe, .video{
    height: auto;
    min-height: 450px;
}

Put the code in the "Custom CSS code" textarea, located in the Dashboard > wpDiscuz > Settings > Styles & Colors admin page.

Don't forget to delete the caches before checking.

Posts: 11

Nate Lundy

Customer

Topic starter

Apr 05, 2023 1:43 am

(@nate-lundy)

Member

Joined: 2 years ago

That seems to have got the Twitter embed working, but:

The Instagram embed is enormous on desktop: https://go.benish.io/yCP5TKjZ and has a lot of empty space under it on mobile: https://go.benish.io/95nD8J0v
The YouTube embed is cropping the sides of the thumbnail on desktop: https://go.benish.io/zdHc9PcS and it's much worse on mobile: https://go.benish.io/bWC4y8Xm

1 Reply

Astghik

Admin

(@astgh)

Joined: 8 years ago

Illustrious Member

Posts: 6450

Apr 06, 2023 1:45 pm

Reply to

Nate Lundy

@nate-lundy,

Add this code as well:

#wpdcom .wpdiscuz-embed-wrapper iframe{
    max-width:none !important;
    width: 88% !important;
}
#wpdcom iframe.instagram-media.instagram-media-rendered {
    min-height: 850px;
}
@media screen and (max-width: 600px){
    #wpdcom iframe.instagram-media.instagram-media-rendered {
       min-height: 530px;
    }
     #wpdcom .video, #wpdcom .video iframe{
         min-height: auto;
   }    
}