To make an embedded YouTube video responsive in WordPress, you can follow these steps:
Obtain the YouTube embed code
Go to the YouTube video you want to embed and click on the “Share” button below the video. Then, select the “Embed” option to generate the embed code.
Edit the WordPress post or page
Open the WordPress editor for the post or page where you want to embed the YouTube video.
Switch to the Text/HTML editor
In the WordPress editor, locate the “Text” or “HTML” tab to switch from the visual editor to the text-based editor. This allows you to work with the actual HTML code.
Paste the YouTube embed code
In the text editor, find the appropriate location where you want to insert the YouTube video. Then, paste the YouTube embed code you obtained in the above Step.
Add a responsive wrapper
Wrap the YouTube embed code with a responsive container to make it responsive. You can use a <div> element with a responsive CSS class.
For example, you can wrap the embed code with a <div> element and apply the “embed-responsive” class:
<div class=”embed-responsive”> Add Your Embedded Responsive Code Here </div>
The “embed-responsive” class and the “embed-responsive-16by9” class ensure that the video container maintains a 16:9 aspect ratio and adjusts its size based on the screen size.
Save and publish the post/page
After making the necessary changes, save or update the post or page to apply the changes.
Preview and test
Preview the post or page to see how the embedded YouTube video looks and behaves on different screen sizes. Test it on various devices to ensure proper responsiveness.
By following these steps and utilizing a responsive wrapper, you can make the embedded YouTube video responsive within your WordPress website.
Post a Comment