Obsidian裡產生YouTube影片iframe的作法：使用Dataviewjs

因為使用了Obsidian Soundscapes在Obsidian裡透過YouTube聽音樂，但有些影片無法被嵌入筆記裡，為了簡化偵測可嵌入的測試，在網頁裡加入下列Dataviewjs來快速測試：

1. 輸入影片代碼
2. 點擊Create Video
3. 若出現影片封面表示可也都內嵌

```dataviewjs
let eleHTML = dv.el("hidden", "");

dv.span("YouTube ID: ");
let eleID = dv.el("input");
const button = dv.el("button", "Create Video");

eleID.style.width = "200px";

eleID.onfocus = function() {
  eleID.value = "";
}

eleID.onblur = function() {
  let _sID = this.value;
  if (_sID.length != 11) {
    new Notice("YouTube ID wrong!");
    return;
  }
  let _sHTML = '<iframe id="IFRAME" width="650" height="315" src="https://www.youtube.com/embed/%ID%" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';

  eleHTML.value = _sHTML;

  eleHTML.value = eleHTML.value.replace(/%ID%/, _sID);

  new Notice("onblur " + eleHTML.value);
}

button.onclick = function() {
  const ele = document.getElementById("IFRAME");
  if (ele) ele.remove(ele);

  dv.paragraph(eleHTML.value);
}

＃＃

您可能也會有興趣的類似文章

• Obs131｜Obsidian使用Dataviewjs動態查詢的嘗試 (0則留言, 2023/05/27)
• [Obs＃33] Media-Extended：嵌入多媒體檔案的簡單方法 (0則留言, 2021/04/17)
• Obs151｜幫Obsidian加上音樂－生產力火速大漲十倍！😂使用Soundscapes外掛 (0則留言, 2024/02/08)
• Obs130｜用Dataviewjs將Dataview表格產生成Markdown格式，並複製到剪貼簿的技巧 (2則留言, 2023/05/20)
• Obs134｜用Dataviewjs製作簡單的建檔統計圖－使用Charts外掛 (0則留言, 2023/08/13)
• Obs137｜用Dataviewjs讀取CSV資料以繪製統計圖表 (0則留言, 2023/09/03)
• [Obs＃51] QuickAdd全攻略(2)：腳本撰寫與巨集使用要點 (0則留言, 2021/09/18)
• [Obs＃58] 快速開啟常用筆記的方法 (0則留言, 2021/10/23)
• [Obs＃57] YAML區tags標籤自動補全的3種方法 (2則留言, 2021/10/23)
• Obs127｜用Templater Hotkeys簡化Obsidian自動化腳本，詳解4個腳本範例 (0則留言, 2023/05/05)
• [Obs＃88] 綜合練習：快速設定的6種方法─使用8個Obsidian外掛 (0則留言, 2022/05/21)
• [Obs＃35] Buttons外掛開啟筆記自動化操作契機 (0則留言, 2021/04/23)
• [Obs#8] v0.8.1 大改版功能搶先報！ (5則留言, 2020/07/22)
• [Obs＃42] Buttons外掛 0.4.5 新功能 (0則留言, 2021/05/19)
• [Obs＃71] 新手適用的多功能模板外掛：From Template (0則留言, 2022/02/19)