Embedded Video too Large

[presto]

Hi,

I’ve read through all of the posts regarding video sizes and tried every possible scenario I could think of based on those posts but nothing is working for me. Can someone please help? Here is the issue…

I have videos stored on Amazon S3. I am using S3 Media Maestro to deliver the content via the site.

I used this code to display the video:
[s3video s3url=”LEAHomeVid.mp4″ s3bucketregion=”us-east-1″ height=”100″ width=”100″ /]

When I view the page, the video is huge. I’ve tried putting in lower height and width values via the code but it doesn’t change on the page. (If I view page source it always says the video is being displayed at whatever size I have requested via the code.)

The site is not live. Is there something I can send to you that would give you more insight to my issue?

Side note – I found this article on the S3 Media Maestro website. Is my issue possibly related to this? http://support.s3mediamaestro.com/article/137-my-video-player-is-re-sizing-by-itself-what-gives

Thank you in advance!

[presto]

I’m also experiencing the issue described here. It would be great if you could solve both of these. 🙂

https://archived.seventhqueen.com/forums/topic/video-post-display-issue

[Radu]

Hi,

Please provide URL where the video appears to can provide you a css fix.

Best Regards

Radu

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 ?

[presto]

Hi Radu,

The site is not live. Is there something I can send that will allow you to see what you need to see? Thank you for your help!

[Radu]

Hi,

Not really

Try to put this CSS in wp-admin -> theme options -> general options -> Quick CSS

COPY CODE

.mejs-container embed,iframe,object,video {max-width: 100%;max-height: 350px;}

Let me know if it works

Best Regards

Radu

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 ?

[presto]

This reply has been set as private.

[Radu]

Hi,

Please provide admin credentials to can take a look at this issue.

Regards

Radu

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 ?

[presto]

Hi Radu,

I am not at liberty to provide admin credentials. Can you please tell me what information you need so I can provide it to you?

Thanks!

[Radu]

Hi,
I need to make a closer debug on the code markup and how to content is created for the backend.
This is the only way that i can help,taking in mind you are using a third party plugin.

Cheers

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 ?

[presto]

Radu,

I have discovered something new that may help. It’s the actual media player that is not resizing. When the code you provided is implemented the video does resize inside of the player. Are you able to tell me what code to use in order to adjust down the size of the video player?

Thank you.

[presto]

This reply has been set as private.

[presto]

Radu,

I’ve been viewing with Safari & Chrome. Firefox does the exact opposite and makes the video extremely tiny. 🙁

[Radu]

Hi,

The login details are not correct, can you please check ?

Cheers

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 ?

[presto]

Hi,

I just tested and am able to login with the credentials. Did you notice the URL was different? It isn’t a dot com. Maybe that’s what is causing the issue?

Thanks!
Angela

[presto]

Hi Radu,

I just received a message from s3 Media Maestro stating they resolved the issue. I am unable to view the fix at the moment but wanted to let you know this happened before you put any additional efforts in.

I will post again when I can confirm the solution to be valid and share the fix or ask for additional help.

Thanks much for your time!
Angela

[presto]

Radu,

The solution ended up being almost exactly what you suggested in the beginning and probably something I could have been able to figure out if I knew enough about code. Thank you so much for your help!

This was added to the style.css in the kleo-child folder to give full control over the video output size:

embed,iframe,object,video {max-width: none;max-height: none;}

Cheers!
Angela

[Radu]

Hi,

I’m glad to hear that you have fixed the problem.

Best Regards

Radu

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 ?

[clyn]

Hi,

If i use this code this code
.mejs-container embed,iframe,object,video {max-width: 100%;max-height: 350px;} its working but, when the change screen size cutting bottom… If screen is large such as notebook or pc i am losing botton side. If i increase height 350 to 600 this time mobile is large. Any java script or css code when the screen size is different use different heigt…

[Radu]

Hi,

Try to use this instead

For mobile

COPY CODE

@media(max-width:600px) {
    .mejs-container embed,iframe,object,video {max-width: 100%;max-height: 350px;}
}

For desktop

COPY CODE

@media(min-width:600px) {
    .mejs-container embed,iframe,object,video {max-width: 100%;max-height: 550px;}
}

Adjust the 300 and 550 values for your needs

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 ?

[clyn]

Thank you its working… also is it possible to use more different screens?

[Radu]

Hi,

Use the resolution intervals that you need you can change min-width to your desired value also the max-width

COPY CODE

    @media only screen and (min-width:960px){
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width:1440px){
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width:2000px){
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width:480px){
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width:768px){
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }

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 ?

[clyn]

thank you so muchhhh :))

[clyn]

Actully youtube embed height is problem. twitter facebook instgram is ok. but youtube adding black background so its going height. any code for only youtube embed? :)))

[Radu]

Hi,

Selector for iframe youtube only

COPY CODE

.mejs-container iframe[src*="youtube.com"] {
    width: 100% !important;
    height: 100% !important;
    max-height: 460px;    
}

Change the max-height: 460px to your desired value

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