Code Snippet Related Categories
Reason for needing the Code Snippet
If you use Beaver Themer to layout single post pages and format the post content using the Gutenberg Block Editor you notice when embedding a video that the “Resize for smaller devices” switch is enabled by default on video blocks. The purpose of this setting is to maintain the original aspect ratio of the video and the responsive size of the browser changes.
But leaving this set when the post content is displayed in a Beaver Themer template causes a huge white space above the video when viewed on a desktop (about 200px or so)!
What the Code Snippet does
The CSS code I got from the Beaver Builder developers works to eliminate this problem. Hopefully at some point Beaver Themer will be updated and not require this "fix".
With the added CSS you don't have to turn off the Resize switch on every video block in your posts.
What the page looks like Before and After
Here's the Code Snippet
/* fix Themer bug on Resize for smaller devices with video blocks */
.wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper:before {
padding-top: 0;
}
Limit search for phrases by using " " around the phrase
Subscribe to Code Snippet updates
You will get an email the morning after we post a new Code Snippet
Other Recent Code Snippets
After creating a child category I wanted to remove the parent category from 30 posts. I finally searched for “how to remove a post category in bulk edit in wordpress” and and lo and behold the second result led me to this plugin. It works perfectly. I’m only sorry I […]
Read More
With more and more privacy laws on the horizon, we advise all of our clients to not only have a Privacy Policy in place but also have a strategy to keep it up to date with newly required disclosures. An up to date Privacy Policy can help you avoid significant […]
Read More
I came across an Elementor vs Beaver Builder comparison review that was published in August 2020. While I am pretty biased in favor of the Beaver Builder platform the reviewer seemed to favor Elementor. If you are trying to decide which page builder platform to use I’d encourage you take […]
Read More
Ever want to provide your readers with email updates to your website? WordPress’ built in RSS feed functionality provides an easy way to provide the content to email newsletter services like Mailchimp or Mailerlite. But what if you want to create email updates that don’t include all your new posts, […]
Read More
I made an animated gif screenshot recording to demonstrate a code snippet, but I wanted to resize the image and make it loop. I found a useful website that has easy tools to do that. I reduced the size by 50% and made it auto-loop 30x. Then optimized it to […]
Read More
click the green switch at the top of the screenshots to compare the WordPress vs the Static HTML versions of the same website the static version is live at: http://halcyonlearning.com/
Read More
Reader Interactions