Video Embed and Youtube Blocks Not Working

  • Resolved afmeck

    (@afmeckel)


    3 years, 7 months ago

    Hi,

    Guttenberg Embed and Youtube blocks are working on the back end but aren’t showing up on the front end anymore (previously they did).

    The Youtube block is placed about 2/3rds down the page, right after “If not, then do yourself a favor and check out this introduction to the art (and introductory course) by legend Dirk Ercken (not affiliated):”

    Adding the following snippet of CSS, as recommended in other posts on this topic, doesn’t help:

    .wp-embed-responsive .wp-block-embed .wp-block-embed__wrapper:before {
    position: relative;
    }

    However, removing the following snippet, given to me in another thread on this forum to help with a sizing issue, does fix the problem:

    @media only screen and (max-width: 669px){
    .wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
    padding-top: 0;
    }

    Removing the latter snippet causes videos to be full-width, no matter the screen size, which doesn’t work with my site.

    Thanks in advance for any suggestions!

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 16 total)

  • Hello,

    ?Please try to add the below CSS code from the Appearance > Customize > Custom CSS, and check.

    .wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
    padding-top: 56.25%;
}
    Thread Starter afmeck

    (@afmeckel)

    Hi @abhikr781,

    Thanks for the snippet! It didn’t seem to work but did give me the idea to remove the last two lines from the following snippet given to me by either yourself or another OceanWP developer to prevent the player/block from being full-width:

    @media(min-width: 670px) {
    .single-post figure {
        max-width: 675px;
        margin: auto;
        margin: 1.5em auto;
    }

    <strong>.single-post .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
        padding-top: 0;</strong>
    }
}

    All is well with the video blocks now except that yet another snippet that I got from you guys to add padding to the sides of video blocks in mobile view has stopped working. I’m not sure if it’s related but replacing the above lines that I deleted doesn’t bring it back.

    Here’s the mobile padding snippet:

    .entry-content .wp-block-image figure:not(.alignfull):not(.alignwide) {
    margin-left: 10px;
    margin-right: 10px;
    }

    Any ideas on how to get that back?

    Thanks for the help!

    Hello,

    SOrry bit not facing any issues.

    Kindly share the related snapshots or a short video of the issue.

    Thread Starter afmeck

    (@afmeckel)

    No problem.

    Here’s a screenshot that shows an image block and caption without padding on the sides: https://imgur.com/J2WXool

    APologize for the delay in response.

    Kindly try the below CSS code and check.

    .wp-block-embed {
    padding: 0 1em;
}
    Thread Starter afmeck

    (@afmeckel)

    No worries.

    Thanks for the snippet but it doesn’t seem to be working. Still no padding on the sides.

    Hello,

    Can you please share the page URL where you facing this issue?

    Please try this one.

    .wp-block-image .aligncenter {
    margin: 0 10px;
}
    Thread Starter afmeck

    (@afmeckel)

    Sorry for the slow response and thanks for the effort. Unfortunately, neither snippet seems to be adding any padding or margin to the images and captions.

    Here’s a the for the page that contains the image I posted above: https://naturephotoist.com/ideas-macro-nature-photography/

    hello,

    That is quite odd, Can you please share a snapshot where you have added this code or copy and paste here the complete Custom CSS field.

    Try this one also.

    .wp-block-image .aligncenter {
    margin: 0 20px !important;
}
    Thread Starter afmeck

    (@afmeckel)

    Here’s a screenshot of the Customizer CSS field with the last snippet you suggested above and the same page opened and reduced to mobile view showing no margins on the sides of the image:

    https://imgur.com/zZYAYAh

    And here’s the entire CSS field:

    /* Full width button on the homepage */
.full-btn.elementor-widget-button .elementor-button { width: 100%; }

/* Newsletter form button */
.oew-newsletter-form-wrap .button { padding: 0 20px; }

/* Footer */
body #footer-widgets { text-align: center; }
body #footer-widgets .ocean-newsletter-form { margin: 0 0 26px; }
body #footer-widgets .ocean-newsletter-form-wrap input[type="email"] { color: #7c7c7c; border-width: 2px; border-color: rgba(255,255,255,0.2); font-size: 15px; letter-spacing: 0.8px; }
body #footer-widgets .ocean-newsletter-form-wrap input[type="email"]:hover { border-color: rgba(255,255,255,0.5); }
body #footer-widgets .ocean-newsletter-form-wrap input[type="email"]:focus { border-color: rgba(255,255,255,0.6); }
body #footer-widgets .ocean-newsletter-form-wrap button:hover { background-color: #5c7c19; }
body #footer-widgets .social-widget li a { color: #4a4a4a; font-size: 20px; line-height: 1; padding: 0.5em; }
body #footer-widgets .social-widget li a:hover { color: #8cba29; }

/* Scroll top button */
#scroll-top { right: 30px; bottom: 0; width: 48px; height: 35px; line-height: 35px; font-size: 22px; border-radius: 4px 4px 0 0; }

/* Footer newsletter form on responsive */
@media only screen and (max-width: 320px) {
    #scroll-top { display: none !important; }
}

.single .thumbnail img {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
}

ul.meta li i {
    display: none;
}

/*Hide Time & Date on Related Articles*/
#related-posts time.published {display: none;
}

body a {text-decoration:none!important;}

@media(min-width: 670px) {
    .single-post figure {
        max-width: 675px;
        margin: auto;
        margin: 1.5em auto;
    }
	
	@media only screen and (max-width: 669px){
.wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
    padding-top: 0;
}

		.entry-content .wp-block-image figure:not(.alignfull):not(.alignwide) {
    margin-left: 10px;
    margin-right: 10px;
}

.wp-block-image .aligncenter {
    margin: 0 20px !important;
}

    Thank you for sharing the code and snapshot.

    As checked, a closing bracket is missing in the marked block of code and that is the reason for not working the below codes.
    Please add a closing bracket to fix the issue.
    https://ibb.co/7nXsrhY

    Thread Starter afmeck

    (@afmeckel)

    Thanks for pointing that out! The original block you suggested for controlling margins on mobile devices is now working.

    Unfortunately, adding the closing bracket has also caused all of the images to be aligned to the left instead of the center despite being centered in Gutenberg, as shown in the screenshot below:

    View post on imgur.com

    I’m not seeing any other bracketing errors.

    Here’s the original mobile margins block that I’ve kept in the Custom CSS field:

    .entry-content .wp-block-image figure:not(.alignfull):not(.alignwide) {
    margin-left: 10px;
    margin-right: 10px;
    }

    And here is the entire field as it stands now:

    /* Full width button on the homepage */
.full-btn.elementor-widget-button .elementor-button { width: 100%; }

/* Newsletter form button */
.oew-newsletter-form-wrap .button { padding: 0 20px; }

/* Footer */
body #footer-widgets { text-align: center; }
body #footer-widgets .ocean-newsletter-form { margin: 0 0 26px; }
body #footer-widgets .ocean-newsletter-form-wrap input[type="email"] { color: #7c7c7c; border-width: 2px; border-color: rgba(255,255,255,0.2); font-size: 15px; letter-spacing: 0.8px; }
body #footer-widgets .ocean-newsletter-form-wrap input[type="email"]:hover { border-color: rgba(255,255,255,0.5); }
body #footer-widgets .ocean-newsletter-form-wrap input[type="email"]:focus { border-color: rgba(255,255,255,0.6); }
body #footer-widgets .ocean-newsletter-form-wrap button:hover { background-color: #5c7c19; }
body #footer-widgets .social-widget li a { color: #4a4a4a; font-size: 20px; line-height: 1; padding: 0.5em; }
body #footer-widgets .social-widget li a:hover { color: #8cba29; }

/* Scroll top button */
#scroll-top { right: 30px; bottom: 0; width: 48px; height: 35px; line-height: 35px; font-size: 22px; border-radius: 4px 4px 0 0; }

/* Footer newsletter form on responsive */
@media only screen and (max-width: 320px) {
    #scroll-top { display: none !important; }
}

.single .thumbnail img {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
}

ul.meta li i {
    display: none;
}

/*Hide Time & Date on Related Articles*/
#related-posts time.published {display: none;
}

body a {text-decoration:none!important;}

@media(min-width: 670px) {
    .single-post figure {
        max-width: 675px;
        margin: auto;
			margin: 1.5em auto; } 
} 
	
	@media only screen and (max-width: 669px){
.wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
	padding-top: 0; }
}

		.entry-content .wp-block-image figure:not(.alignfull):not(.alignwide) {
    margin-left: 10px;
    margin-right: 10px;
}

    Thanks for your patience with this. Any further suggestions would be greatly appreciated.

    Thread Starter afmeck

    (@afmeckel)

    I forgot to mention that replacing the above block with either of the two others you’ve suggested (pasted below for reference) or adding them to the field also doesn’t align the images to the center.

    .wp-block-image .aligncenter {
    margin: 0 10px;
}

.wp-block-image .aligncenter {
    margin: 0 20px !important;
}

    Hello,

    Sorry for the trouble, Please replace the last 2 blocks of code with this one.
    https://ibb.co/P61PXT0

    @media only screen and (max-width: 669px){
.wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
	padding-top: 0; }
.entry-content .wp-block-image figure:not(.alignfull):not(.alignwide) {
    margin-left: 10px;
    margin-right: 10px;
}
}

    PS- Take a backup of your codes before making the changes.

    Thread Starter afmeck

    (@afmeckel)

    Not a problem. Everything is looking good now.

    Thanks a lot for the help!

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Video Embed and Youtube Blocks Not Working’ is closed to new replies.