Notifications

Clear all

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,197 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: 6444

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: 6444

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: 6444

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;
   }    
}