[Nilesh LParticipant]

What would it take for the mejs player here https://be.a.cloudgeni.us/course/git-basics to look like http://mediaelementjs.com/#howitworks

My current CSS customization contains this.

.mejs-overlay-play {
    cursor: pointer
}
.mejs-overlay-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    display: block !important;
    background: url(//cdn.cloudgeni.us/bigplay.svg) no-repeat
}
.no-svg .mejs-overlay-button {
    background-image: url(//cdn.cloudgeni.us/bigplay.png)
}
.mejs-overlay:hover .mejs-overlay-button {
    background-position: 0 -100px
}

[RupokMember]

Hey there,

Thanks for writing in! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[Nilesh LParticipant]

There seem to be a lot of mejs elements in the x theme.

Please guide how to use child theme to override wp-content/themes/x/framework/css/src/site/_scss/_mejs.scss and the corresponding CSS wp-content/themes/x/framework/css/dist/site/stacks/renew.css

No matter what I add to x-child style.css it will not override any.

Thanks for your help.

[ChristopherModerator]

Hi there,

Please use cornerstone video element which is very close to what you want, see the attachment.

Hope it helps.

[Nilesh LParticipant]

I have a shortcode that emits AWS S3 signed expiring URL to a media item in my bucket.

How do I use my shortcode inside the cornerstone video element?

https://d3g7234o9edba99.cloudfront.net/fall.mp4?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kM2c3OHNvOWVkYmE5OS5jbG91ZGZyb250Lm5ldC9mYWxsLmpwZyIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTQ3OTc0NzkxOH19fV19&Signature=dVUok9Q2o8Dx4uj4nFRye43DRv~H8bjxBFVDo8GWmH1KeJWlqFgNKw7nJV-6cqeJPLmlDG6z4VOK7~KUBqp8G7ri3U7Undi7MY1oLzZlV5HxNyHwiVbGulBGcHNEnmczVQ85exmTtWQRLFnMY5lL-9Mf7awRyVGBeFb-o-2DJgDnfDzlUHxsW9iHmzqldjyPvapFfA~ufImegXptAfpOoLcMkMi65hAD9vLjoIql43234UvDk0SD3RYkHIiYsrYxzpxY1GFHHduuHLWh0HYSLJ54NHMQa0--gCGQbrL7nfS2~KV9tFblagR4JE7YtiIBBTLRkUxbL0Ume6Kl~C01MA__&Key-Pair-Id=APKAJQHVHPKASDIEHKKA

[Nilesh LParticipant]

I think I am close to a solution but I still don’t see video.

I modified my function to use x video player.

return sprintf(do_shortcode('[x_video_player type="16:9" m4v="%s"]'), $url );

and the result I get is

<div class="x-video player with-container" data-x-element="x_mejs" data-x-params="{&quot;poster&quot;:&quot;&quot;}">
    <div class="x-video-inner"><span class="mejs-offscreen">Video Player</span>
        <div id="mep_2" class="mejs-container svg x-mejs mejs-video" tabindex="0" role="application" aria-label="Video Player">
            <div class="mejs-inner">
                <div class="mejs-mediaelement"><video class="x-mejs" preload="metadata" src="https://d3g78so9edba99.cloudfront.net/clouds.mp4?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kM2c3OHNvOWVkYmE5OS5jbG91ZGZyb250Lm5ldC9jbG91ZHMubXA0IiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNDc5NzQ5ODUyfX19XX0_&Signature=J2nvj85iVL~DLbANkKSG3GEV8LSkvSmCG8Xmhr5Ty~SEQ9kwPRcleoNPlFOkOZzxjQC99FY9xyBFCAYMoDJhMC6AqV-8DZOfDmLEIHq~iK4FsYy6L0d8BRj-aq4bcl6pH8RCu-aobaf5W27g30FT6WeBF5O-~tVZ4NL8UbtwC~aTmoT~CsijRG58lJ42ycS1F2L1p-chAEB7PDdId7~O1ZlcU8S8QRq7c4kcCr6EPSYEb7wbigqxlxEHIc5VH8sopsx80YaBJf9o3cQBCBQzQC60NAPcbnwzs35Q5V3YJUoZeSHeWfdwwKuN-mCrguMFJ480dhoTvGFDHYQwa8CANQ__&Key-Pair-Id=APKAJQHVHPKYIMIEHKKA"><source src="https://d3g78sdo9ffea99.cloudfront.net/clouds.mp4?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kM2c3OHNvOWVYmE5OS5jbG91ZGZyb250Lm5ldC9jbG91ZHMubXA0IiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIoxNDc5NzQ5ODUyfX19XX0_&Signature=J2nvj85iVL~DLbANkKSG3GEV8LSkvSmCG8Xmhr5Ty~SEQ9kwPRcleoNPlFOkOZzxjQC9FY9xyBFCAYMoDJhMC6AqV-8DZOfDmLEIHq~iK4FsYy6L0d8BRj-aq4cl6pH8RCu-aobaf5W27g30FT6WeBF5O-~tVZ4NL8UbtwC~aTmoT~CsijRG58lJ42ycS1F2L1p-chAEB7PDdId7~O1ZlcU8S8QR7c4kcCr6EPSYEb7wbigqxlxEHIcVH8sopsx80YaBJf9o3cQBCBQzQC60NAPcbnwzs35Q5V3YJUoZeSHeWfdwwKuN-mCrguMFJ480dhoTvGFHYQwa8CANQ__&Key-Pair-Id=APKAJQHHPKYIIEHKKA" type="video/mp4"></video></div>
                <div
                    class="mejs-layers">
                    <div class="mejs-poster mejs-layer" style="display: none;"></div>
                    <div class="mejs-overlay mejs-layer" style="display: none;">
                        <div class="mejs-overlay-loading"><span></span></div>
                    </div>
                    <div class="mejs-overlay mejs-layer" style="display: none;">
                        <div class="mejs-overlay-error"></div>
                    </div>
                    <div class="mejs-overlay mejs-layer mejs-overlay-play">
                        <div class="mejs-overlay-button"></div>
                    </div>
            </div>
            <div class="mejs-controls">
                <div class="mejs-button mejs-playpause-button mejs-play" style=""><button type="button" aria-controls="mep_2" title="Play" aria-label="Play"></button></div>
                <div class="mejs-time-rail" style="width: 727px;"><span class="mejs-time-total mejs-time-slider" style="width: 717px;"><span class="mejs-time-buffering" style="display: none;"></span><span class="mejs-time-loaded" style="width: 2.09652px;"></span><span class="mejs-time-current" style="width: 0px;"></span>
                    <span
                        class="mejs-time-handle" style="left: -5px;"></span><span class="mejs-time-float"><span class="mejs-time-float-current">00:00</span><span class="mejs-time-float-corner"></span></span>
                        </span>
                </div>
            </div>
            <div class="mejs-clear"></div>
        </div>
    </div>
</div>
</div>

[Nilesh LParticipant]

I removed all this custom work I was doing and created a new page https://be.a.cloudgeni.us/test/

with a cornerstone video player element containing a link https://cloudgenius.s3.amazonaws.com/clouds.mp4

but I still don’t see any video player.

What am I missing?

Appreciate your help. Thanks.

[Nilesh LParticipant]

I can see the video if I add these to my child functions.php

// http://wordpress.stackexchange.com/questions/108833/remove-wp-mediaelement-css-from-wp-head
wp_deregister_script('wp-mediaelement');
wp_deregister_style('wp-mediaelement');

This is a hack unfortunately that I do not want.

What’s the right way to get cornerstone element to play as designed by theme.co?

[RadModerator]

Hi Nilesh,

You shouldn’t do it. WP MediaElement is part of WordPress core, and a lot of plugins are depending on it. Or else, some may not function correctly.

The problem might be due to multiple instances of Media Element being loaded from other plugins. Please remove that code and provide your admin login credentials, I’ll check what plugins is causing the conflict.

Thanks!

[Paul RModerator]

Hi,

As stated above this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself.

Thank you for your understanding.

[Nilesh LParticipant]

Thank you. I found and removed the conflicting Media Element.

// Below is the wrong way. The right way is to disable styles in s3mediamaestro.
// http://wordpress.stackexchange.com/questions/108833/remove-wp-mediaelement-css-from-wp-head
//wp_deregister_script(‘wp-mediaelement’);
//wp_deregister_style(‘wp-mediaelement’);

Thanks for your support. Theme.co team rocks!

[ChristianModerator]

You’re welcome.

[Author]

Posts