Adjusting the style of the auto embed links.
Adding a link to your site from another WordPress site you will very likely get a standard auto embed of the link.
It will look similar to what you see below. (Actually on the frontend it is disabled with the code further below. On the edit post area I can still see it.)
How do we go about changing this?
Lets take a look at the Html and CSS to see the tags in place for a WordPress site link autoembed. Right click in your browser somewhere in the embeded area and select Inspect Element. The Html and CSS section will then show up below, as can be seen in this screenshot.
The WordPress embed CSS
One can modify the style of the embed to create the embed you want to use.
It will then adjust all the WordPress embeds on your site.
The whole embed:
.wp-embed { padding: 25px; font: 400 14px/1.5 'Open Sans',sans-serif; color: #82878c; background: #fff; border: 1px solid #e5e5e5; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05); overflow: auto; zoom: 1; }
The embed heading:
p.wp-embed-heading { margin: 0 0 15px; font-weight: 700; font-size: 22px; line-height: 1.3; }
The embed featured image:
.wp-embed-featured-image.square { float: left; max-width: 160px; margin-right: 20px; } .wp-embed-featured-image { margin-bottom: 20px; }
The embed excerpt
.wp-embed-excerpt { }
The embed footer:
.wp-embed-footer { display: table; width: 100%; margin-top: 30px; }
The hidden boxes.
.wp-embed-share-dialog.hidden { opacity: 0; visibility: hidden; } .wp-embed-share-dialog { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #222; background-color: rgba(10,10,10,.9); color: #fff; opacity: 1; -webkit-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
Just go ahead and adjust. If there are sections you want to hide then use display: none; It removes the specific area (CSS class) you added it to.
The code to add to your functions.php file to remove autoembeds:
function disable_embeds_init() { // Remove the REST API endpoint. remove_action('rest_api_init', 'wp_oembed_register_route'); // Turn off oEmbed auto discovery. // Don't filter oEmbed results. add_filter( 'embed_oembed_discover', '__return_false' ); // Remove oEmbed discovery links. remove_action('wp_head', 'wp_oembed_add_discovery_links'); // Remove oEmbed-specific JavaScript from the front-end and back-end. remove_action('wp_head', 'wp_oembed_add_host_js'); } add_action('init', 'disable_embeds_init', 9999);
It removes the embed from the frontend and backend.
Or use the disable embeds plugin. Github: https://github.com/swissspidy/disable-embeds/blob/master/disable-embeds.php
To have better control of the embeds try out the plugin Embedly.
A very easy way is to actually add a . before the link like so: .https://wordpress.org/support/topic/how-to-disable-auto-wordpress-emmed-script?replies=6
Then create the links. Just as I have done right below. A dot before the link.
Resources:
.https://wordpress.org/support/topic/how-to-disable-auto-wordpress-emmed-script?replies=6
https://crunchify.com/how-to-disable-auto-embed-script-for-wordpress-4-4-wp-embed-min-js/
I used Code Snippets plugin and got this to work. Thanks!
I did hide element by custom CSS for disappear the embeds, but can disable 100% javascript by plugin: https://wordpress.org/plugins/disable-embeds-littlebizzy/
Thanks, this is very helpful in viewing the css that oembed uses to override a website’s theme. The only problem is that this workaround is temporary. Once the page is reloaded, the ugly white background is back. I don’t understand why WordPress would add such a useful feature but configure it in such a way that it overrides theme settings/ style.css.
I would be grateful if you could take this tutorial one step further and explain:
1. How to find the actual location of the stylesheet that oembed is using to override theme style.css /site settings.
2. How to prevent oembed from overriding site settings and how to make the changes permanent.
Some of the things I have tried is:
Employing the workaround you described above: This works until the page is reloaded.
Adding the styles listed above to my child theme’s style.css: This has no effect.
Making a site specific plugin to override the styling of the oembed feature. Also, no effect.
I found the plugin instructions here: https://www.wpbeginner.com/beginners-guide/what-why-and-how-tos-of-creating-a-site-specific-wordpress-plugin/
None of these workarounds seems to have any effect on the white background, or the text color.
I am using the latest version of WordPress (as of Dec 2016, and the latest version of Parabola theme, with a child theme I made based on Parabola) Most of my settings, such as text and background color are implemented using Parabola theme settings.
My ultimate goal is to prevent oembed from overriding my site’s custom background and font colors.
What would you suggest I try next?
Thanks
Hi
I have made an adjustment to the code. I really do not know how to answer your questions.
Perhaps you could post at https://wordpress.org/support/ and when you get a good reply just post it as a reply to your own comment.
Merry Christmas!