How to Responsive YouTube Videos in Wordpress

This post is also available in: 日本語

1 Introduction
- 1.1 Responsiveness
2 Responding to YouTube Videos
- 2.1 Add CSS
- 2.2 Add code on the posting screen
3 And finally,

Ads

Introduction

Responsive response has recently become mainstream on sites such as Word Press. In this article, we look specifically at how to respond to YouTube videos.

Responsiveness

Responsive design is defined on Google’s developer site as follows:. This is the method Google recommends.

It delivers the same HTML code with the same URL, regardless of the user’s device type (PC, tablet, mobile, non-visual browser), but with different rendering methods depending on the screen size. Responsive web design is a design method that Google recommends.

Responding to YouTube Videos

Here’s how to respond to YouTube videos.

Ads

Add CSS

Open the CSS Edit screen from Appearance > Theme Editor. Add the following CSS here. This time I will add “youtube1” for convenience. In the CSS, set the width and height of the iframe element to 100%. The image appears as if the position is absolute.

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

That’s all for adding CSS.

Add code on the posting screen

Next, enter the following code on the actual posting screen. Press <div> before and after the embedded code. It uses the frame element to embed the YouTube video.

<div class = “youtube1”>
Embedded Code
</ div>

The embedded code is the code in the lower right that transitions from the YouTube share button.

If you actually use the embedded code above, you will get something like this:.

<div class=”youtube1″>
<iframe src=”https://www.youtube.com/embed/oK_cPoF6bIE” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
</div>

The actual sample is as follows.