How to Responsive YouTube Videos in WordPress

This post is also available in: 日本語

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.

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.

If you change the size of the PC browser, you will see that it is responsive.

And finally,

That’s it for YouTube videos that you can respond to on WordPress.

UTILLY also has a code summary to help you embed YouTube videos.

Check out the full article below.

How to customize YouTube embedded code such as automatic playback and subtitle display

Ads
フォローして最新情報をチェック!

SNSで最新情報を発信中

情報を受け取りたい方は、是非フォローください

ビジネスのご相談

広告掲載 / ライティング支援 /
オウンドメディアコンサルティング / 取材依頼など

お問い合わせ

ライター募集

一緒にUtillyのコンテンツをつくりませんか?
サービスレビューやコラムを執筆いただける方を募集しています。

募集要項