YouTube Embed Size Issue

[billybragg]

Hello, I’ve noticed an issue for embedded YouTube videos…After you hit the “Load More” posts button in the activity feed or on Group pages, any YouTube video that has previously been embedded is completely blown up where half the player is cut off.

Videos embedded and listed before the initial “Load More” button display just fine.

You can clearly see the issue in the attached image. Please advise how to correct this issue. Thank you!

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Radu]

Hi,

Please take a look at this video: https://drive.google.com/file/d/0Bxo5b6iHWRMwZVFrZUZTZkI5Sms/view i cannot reproduce that.

That it’s happening on a specific browser?

Try to empty your browser cache and try again.

Let me know
Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[billybragg]

What browser are you using in that video? I receive the error in Chrome, Firefox, and Safari.

[Radu]

I’m using google chrome.

What resolution are you running ?

R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[billybragg]

Retina MacBook Pro 15.4″ with 2880×1800 resolution.

[billybragg]

Additionally, the same issue is present on mobile devices. See attached.

[Radu]

Hi,

Add this css to wp-admin -> theme options -> quick css

COPY CODE

.activity-inner iframe[src*="youtube.com"] {
    width: 100% !important;
    height: 100% !important;
    min-height: 460px;    
}

We will include this fix on next theme update.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[billybragg]

This code had no change on the affected videos.

[Radu]

Hi,

The reason for not working are the supplementary quotes

The CSS should look like this in your quick CSS area

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[billybragg]

I do see those extra characters in my source code, but I’m not adding them when I place the code you provided in quick css. See image attachment.

[Radu]

Please taka e look i’ve replaced the code from your quick css area with this

COPY CODE

.activity-inner iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 460px;    
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[billybragg]

This is getting closer to fixing the problem…However, forcing a minimum height still gives a pretty ugly result on mobile/small screens.

See the attached thumbnail preview and the resulting video in progress.

Again, this issue only presents itself AFTER pressing the “Load More” button. Is there no way to eliminate this issue altogether?

Thx

[Radu]

Hi,

Add after the previous code this one

COPY CODE

@media(max-width:600px) {
    .activity iframe {
        width: 100% !important;
        height: 100% !important;   
        min-height:250px;
        
    }
}

This code will runs only if the device with it’s lower than 600px so this should fix your problem, if you are not happy with the player height on mobile change the max-height:250px; value to 0 or a larger one (0 represents default)

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts