|

How to embed a responsive iframe youtube video in WordPress

ByTawfiqur Rahman

HTML

<div class="iframe-container">
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/VIDEO_ID frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSS

/* Responsive Youtube iframe video styles */
 .iframe-container {
   position: relative;
   overflow: hidden;
   width: 100%;
   padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
 }
 /* Then style the iframe to fit in the container div with full height and width */
 .responsive-iframe {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
 }

Similar Posts

How-to-change-Divi-Map-module-default-Zoom-Level
|

How to change Divi Map module default Zoom Level

ByTawfiqur Rahman

The Divi Map module is a powerful and versatile tool for displaying maps on your WordPress website. It offers a variety of customization options, including the ability to change the default zoom level. In this blog post, we will be discussing how to change the default zoom level of the Divi Map module in your Divi theme powered WordPress website. We will be covering different methods to change the zoom level for example via the Divi theme options, custom CSS, and JavaScript. Additionally, we will also be discussing the best practices and things to keep in mind when changing the default zoom level to ensure your website looks and functions as expected.

Replace-an-Image-in-WordPress-Media-Library-remote-url
| |

How to Replace an Image in WordPress Media Library via Upload a file or from Remote URL

ByTawfiqur Rahman

Managing images on your WordPress website is an important part of keeping your content up-to-date and looking professional. In this video post, we will be discussing how to replace an image in the WordPress media library by uploading a new file or by using a remote URL.

How to Change Your Media Item permalink/URL (Step by Step)
|

How to Change Your Media Item permalink/URL (Step by Step)

ByTawfiqur Rahman

Problem: Unable to change unattached image permalink from the media library I have an image whose permalink is the same as a WordPress page Stencils Videos. The problem is image was uploaded before creating the page. So image took the URL domain.com/stencils-videos first and the page got a permalink of domain.com/stencils-videos-2, obviously, you don’t want…

How to Remove Query Strings from Static Resources in WordPress with or without Plugin
| |

How to Remove Query Strings from Static Resources in WordPress with or without Plugin

ByTawfiqur Rahman

If you are looking for a solution to Remove Query Strings from Static Resources like CSS & JavaScript in your Wordpress site to increase your website speed and a better test result on Pingdom, GTmatrix, or Google Page Speed Insights. Then this tutorial is for you. Leveraging Browser Cache of Static Resources like CSS and JavaScript plays…

Leave a Reply

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