Home

# 工具

# HTML iframe element

# Embed single videos

To embed a youtube video in our website, we should add iframe tag in our html file, the following is the parameter that we can add.

  • Mute -> mute=1
  • Start time of x seconds -> start=x
  • End time of y seconds -> end=y
  • The timeline color -> color=white (original is red)

The following parameters are used in my custom html.

  • showinfo=0
  • autoplay=1
  • controls=0
  • loop=1
  • rel=0 -> Don't show suggested videos from other channels.
Sample1
<iframe
width="560" height="315"
src="https://www.youtube.com/embed/{ID}?showinfo=0&controls=0&loop=1&rel=0"
frameborder="0" allow="picture-in-picture" allowfullscreen></iframe>

width="560" and height="315" is equel to 16 : 9

or make it responsive using

.YTplayer {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  border-radius: 15px;
}

Example of fix size:

# Embed playlist

To embed a playlist, you just need to change the URL in the iframe tag
from embed/{ID}
to embed/videoseries?list={playlist ID}
or embed?listType=playlist&{URL parameter}&list={playlist ID}

Sample
<iframe
width="560" height="315"
src="https://www.youtube.com/embed?listType=playlist&showinfo=0&controls=0&loop=1&rel=0&list={playlist ID}"
frameborder="0" allow="picture-in-picture" allowfullscreen></iframe>

Example:

# 分享影片片段的連結

使用以下連結的格式，就可以簡單的分享給親友一段，含起始和結尾的影片片段囉！
https://www.youtube-nocookie.com/embed/{videoId}?start={startSecond}&end={endSecond}

Example
https://www.youtube-nocookie.com/embed/M4Hj1WW-69E?start=1214&end=1269

# Thumbnail image

To get nice thumbnail image in youtube video, you can simply type in the following urls, and remember to change the video id.

  1. https://i.ytimg.com/vi_webp/{ID}/hqdefault.webp → 480x360
  2. https://img.youtube.com/vi/{ID}/sddefault.jpg → 640x480
  3. https://i.ytimg.com/vi/{ID}/maxresdefault.jpg → 1280x720 (沒黑框)

# 鍵盤快速鍵

以下列出本人常用的快捷鍵，如要查看所有 Youtube 內建的快速鍵，請在 Youtube 裡面按下 Shift + ?
雖然幾乎全部都有用到就是了 XD

  • 切換播放 / 暫停: k
  • 返回 (倒轉) 10 秒: j
  • 往後 (快轉) 10 秒: l
  • 跳至前一個影格 (影片暫停時): ,
  • 跳至下一個影格 (影片暫停時): .
  • 調慢播放速度: < or Shift + ,
  • 調快播放速度: > or Shift + .
  • 跳轉到影片的特定時間點 (例如，按下 7 鍵就會跳轉到影片播放進度的 70% 處): 0..9
  • 開啟或關閉全螢幕模式: f
  • 切換劇院模式: t
  • 切換迷你播放器: i
  • 切換靜音: m

# 指令

# Change speed of the video

To change the youtube video's speed,

  1. Press Ctrl + Shift + c or right-click + Inspect to open development panel.
  2. Switch to the Console panel.
  3. Paste the following code that depends on the speed you like.
document.getElementsByTagName('video')[0].playbackRate = {number};

# API

# 官方的 oembed API

可以選擇要查詢的是 單一影片 或是 播放清單

# 單一影片

規則: https://youtube.com/oembed?url={full_video_link}&format=json
例子: https://youtube.com/oembed?url=https://www.youtube.com/watch?v=UtwuvJk7D7w&format=json

結果範例
{
  "title": "金牌麟洋! 奧運羽球男雙二連霸!｜ ★ 完整轉播搜尋Hami巴黎奧運 ★",
  "author_name": "中華電信 Hami Video 運動",
  "author_url": "https://www.youtube.com/@hamivideo6046",
  "type": "video",
  "height": 113,
  "width": 200,
  "version": "1.0",
  "provider_name": "YouTube",
  "provider_url": "https://www.youtube.com/",
  "thumbnail_height": 360,
  "thumbnail_width": 480,
  "thumbnail_url": "https://i.ytimg.com/vi/UtwuvJk7D7w/hqdefault.jpg",
  "html": "省略..."
}

# 撥放清單

規則: https://youtube.com/oembed?url={full_playlist_link}&format=json
例子: https://youtube.com/oembed?url=https://www.youtube.com/playlist?list=OLAK5uy_lwDtRHbjTwcqVVIu-6ov-uTK13DXYyfzo&format=json

結果範例
{
  "title": "Job for a Rockstar",
  "type": "video",
  "height": 113,
  "width": 200,
  "version": "1.0",
  "provider_name": "YouTube",
  "provider_url": "https://www.youtube.com/",
  "thumbnail_height": 360,
  "thumbnail_width": 480,
  "thumbnail_url": "https://i.ytimg.com/vi/iTMQdcLC6R4/hqdefault.jpg",
  "html": "省略..."
}

可以用來取得撥放清單的 thumbnail image，因為有些播放清單會設定另外的圖片，而非預設的第一個影片縮圖。

# Get the info. by video ID

Using the link below by change the video id you want, then you can get the video information.

https://jabrek.net/dislike-en/get_info.php?id={videoId}

The information will contain the following data:
title , channelName , likes , dislikes , views , comments , videoId , dislikePercent , from

結果範例
{
  "title": "あたしが隣にいるうちに／藤川千愛 アニメ『盾の勇者の成り上がり』エンディングテーマ (''The Rising of the Shield Hero'' Ending Theme )",
  "channelName": "藤川千愛",
  "likes": 97485,
  "dislikes": 1083,
  "views": "15154119",
  "comments": "2483",
  "videoId": "DS2sP8CDLas",
  "dislikePercent": 1,
  "from": "API"
}

P.S.: 若查詢已刪除或私人的影片，則會顯示 error 。

# View the dislike number

If you want to know a video's dislike number but you don't want to download anything, then you can use the api below.

https://returnyoutubedislikeapi.com/votes?videoId={videoId}

The information will contain the following data:
id , dateCreated , likes , dislikes , rating , viewCount , deleted

結果範例
{
  "id": "DS2sP8CDLas",
  "dateCreated": "2022-04-09T20:07:03.084463Z",
  "likes": 97487,
  "dislikes": 1083,
  "rating": 4.956051536978797,
  "viewCount": 15154312,
  "deleted": false
}

# References

  • 官方 YouTube IFrame Player API Doc.
  • 非官方 html youtube iframe
  • 非官方 youtube embed playlist
  • 非官方 youtube speed
  • 非官方 youtube info by id