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!

Attachments:

You must be logged in to view attached files.

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[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

What support service includes ? What not ?

[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

What support service includes ? What not ?

[billybragg]

Retina MacBook Pro 15.4″ with 2880×1800 resolution.

[billybragg]

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

Attachments:

You must be logged in to view attached files.

[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

What support service includes ? What not ?

[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

What support service includes ? What not ?

[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.

Attachments:

You must be logged in to view attached files.

[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

What support service includes ? What not ?

[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

Attachments:

You must be logged in to view attached files.

[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

What support service includes ? What not ?

[Author]

Posts