Adjusting the auto embeds of WordPress site links on your site 

Styling the Auto WordPress embed link.

One can not style the WP embed because this is located inside an iframe which is added from an external web site.

One can only style the frame around the itself and not the content inside of it.

This CSS can be used to style the frame around the content. I added some CSS tags inside the classes used.

.wp-block-embed{
  border: 10px solid green;
}
.wp-embedded-content {
   border: 5px solid green;
   border-radius: 15px;
}

This is the result of using the above wp embedded content CSS.

WP embed styling the border
WP embed styling the border

Mozilla: The Inline Frame element

When adding a link from another WordPress site we will likely get an automatic wp embed showing the title and content. Here is an example of the default style that we will likely see:

The auto wp embed.

In your preferred browser. Right click the embed and select Inspect (Element). Here is an example from Chrome. I am moving the cursor over the bottom HTML and will at the same time see areas in the web page highlighted. In the right sidebar area one can see the CSS.

Chrome-Inspect-selecting-HTML
(Chrome) Right click and select Inspect. Moving the cursor over the bottom HTML code highlights areas in the above web page.

The WordPress embed CSS (which can not be adjusted).

.wp-embed {
    padding: 25px;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-  
    Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    line-height: 1.5;
    color: #8c8f94;
    background: #fff;
    border: 1px solid #dcdcde;
    box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
    overflow: auto;
    zoom: 1;
}

The embed heading:

p.wp-embed-heading {
    margin: 0 0 15px;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.3;
}

The embed excerpt:

.wp-embed-excerpt {
}

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 footer:

.wp-embed-footer {
 }

Inside the wp embed footer:

.wp-embed-site-title {
    font-weight: 600;
    line-height: 1.78571428;
}

.wp-embed-site-title a {
    position: relative;
    display: inline-block;
    padding-left: 35px;
}
.wp-embed a {
    color: #8c8f94;
    text-decoration: none;
}

.wp-embed-meta {
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
}

.wp-embed-comments, 
.wp-embed-share {
    display: inline;
}

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: #1d2327;
    background-color: rgba(0,0,0,.9);
    color: #fff;
    opacity: 1;
    transition: opacity .25s ease-in-out;
}

Check out my tutorial if you would like to change the embeds into paragraph links.

Share the article:

Leave a Reply

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