Site icon Utilly（ユーティリー）

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

U-TILLY

This post is also available in: 日本語

目次

Introduction

Here’s how to customize the YouTube embed code. In the operation of a word press blog or media, you will be able to make more detailed settings in case you want to show videos.

How to embed a YouTube video into WordPress

Here’s how to do it.

How to embed YouTube into WordPress articles

What you’ll find in this article

Here’s what you’ll find in this article.

 

YouTube Embedded Code Basics

The embedded code of YouTube can be displayed as shown below by clicking “Share > Embed”.

The following is an example of the default code.

<iframe width=”wideth size” height=”height size” src=”https://www.youtube.com/embed/ID” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Configure “Parameter” to customize this code.

Depending on the parameter, you can specify various settings such as automatic playback. The parameter is “? “.

Specifically, the image is as follows.

<iframe width=”size” height=”size” src=”https://www.youtube.com/embed/ID?XXXXX=1″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

The XXX portion of “? XXX = 1” is the parameter. “1” immediately after “=” means ON and “0” means OFF. This parameter allows you to specify various actions.

Right after the video unique ID? parameter in a rule such as XXX = 1

 

If there is only one instruction, you can use the above rule, but if there are multiple instructions, such as automatic playback and displaying subtitles, use “&” to connect the parameters. For example, www.youtube.com/embed/ video unique ID? XXXXX = 1 & ZZZZ = 0 & VVVVV = 1 “

parameters are connected by “&”

 

These are the basic parameter rules.

Playing movies automatically

To play a movie automatically, enter “autoplay = 1”.

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?autoplay=1″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Here is the sample

Hide Related Movies

Normally, YouTube will recommend a related video when the video finishes playing. This parameter is ideal if you do not want to display the related video because you are leaving the channel. Grant “? rel = 0”.

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?rel=0″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Start moving image from specified position

You can start a YouTube movie from the position specified by “start = start position”. The time is specified in seconds. For example, 1 minute might be “start = 60” and 2 minutes might be “start = 120”.

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?start=20″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

 

End the movie at the specified position

Here are the parameters for ending a video at the opposite location. You can specify in “end = end”. For example, “end = 30” is displayed when the operation ends in 30 seconds.

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?end=30″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

 

Displaying a movie for a specified section

Multiplying the above two times as a part of the application, you can indicate the video display of the specified section. For example, if you start at 10 seconds and end at 20 seconds, “start = 10 & end = 20”.

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?start=10&end=20″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

 

Playing movies repeatedly

The parameter for repeatedly playing back movies is “loop = 1”.

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?loop=1″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Display subtitles automatically

Here is a command to show or hide subtitles automatically. Auto hide is set to “cc _ load _ policy = 0” and Auto display is set to “cc _ load _ policy = 1”. Even if the viewer has set the subtitle display to OFF, the subtitle will be displayed if the parameter is set to ON.

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?cc_load_policy=1″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Specifying the video quality

Use “vq = value” to specify the desired video quality. For example, you can use it when you want a high-quality movie to be played as it is. However, you need to be careful because it may not work well depending on the viewing environment of the viewer because the image quality specification is forced. Values include, for example:. “highres” is a method of specifying that the video be displayed at the highest quality.

*llarge is 480p、medium is 360p、small is 240p

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?vq=highres” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Hide Annotations

Annotation is a feature that displays comments. Annotations are clickable text that appears in the overlay. If you do not want the annotation to appear until it is embedded, set the following parameter. Note that for annotations, the visibility is 1 and the visibility is 3.

Hide Annotations: “iv _ load _ policy = 1”, Show Annotations: “iv _ load _ policy = 3”
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?iv_load_policy=1″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

 

Disable Full Screen

Specify “fs = 0” if you do not want full screen display. The full-screen icon disappears.

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?fs=0″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

 

Hide the YouTube logo

The “modestbranding = 1” is a rather subtle parameter that hides the YouTube logo.

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?modestbranding=1″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

You can see the parameter list on the official site.

The official YouTube site lists other parameters as well.

 

And finally,

You may have noticed that you can embed YouTube videos with fine details by setting parameters. Now you’re done customizing YouTube’s embed code. For more on how to edit the video itself, check out the full post below.

Please take a look.

Easy, convenient and high quality! Video editing apps/video editing services 14 selections

Exit mobile version