• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

12 July - 2016 By Paal Joachim 4 Comments
Last updated on: December 25, 2018

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.

Auto Embeding a WordPress link

Right clicking in the browser and selecting Inspect Element.

 

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/

 

Share this:

  • Email

Categories: How to, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. Mayur Jobanputra says

    25 February - 2020

    I used Code Snippets plugin and got this to work. Thanks!

    Reply
  2. Laksha says

    6 November - 2017

    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/

    Reply
  3. sochi @sochi on WordPress.org says

    15 December - 2016

    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

    Reply
    • Paal Joachim says

      22 December - 2016

      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!

      Reply

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.