Youtube 链接 src答案

【问题标题】：Youtube link srcYoutube 链接 src
【发布时间】：2019-01-28 19:06:43
【问题描述】：

我的 youtube 链接有问题。我得到 json "https://www.youtube.com/watch?v=kqEfk801E94" 我如何添加到 src ？我读过，但这个链接不正确，因为没有嵌入。例如https://www.youtube.com/embed/kqEfk801E94，不要 https://www.youtube.com/watch?v=kqEfk801E94。我该怎么做并替换 iframe src？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

我不确定我是否完全理解您的问题，但我想您想知道在 iframe 中使用哪种 YouTube 网址。如果是这样，嵌入工作。

如果您正在编写自己的 HTML，您可以直接在 iframe src 中使用嵌入链接。这个小的 HTML 页面会加载您链接到的 URL：

<!DOCTYPE html>
<html lang="en-gb">
  <head>
    <title>YouTube Embed</title>
  </head>

  <body>
    <iframe src="https://www.youtube.com/embed/kqEfk801E94" />
  </body>
</html>

编辑：我看到您将其标记为 Vue.js 和 JavaScript。如果你有一个带有嵌入 URL 的异步响应，如果你设置了一个本地数据值、计算属性或 prop，Vue.js 会自动绑定变量并设置它，所以你只需要做类似的事情：

<template>
  <div>
    <iframe :src="url" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        url: ''
      }
    },
    methods: {
      async loadYouTubeUrl() {
        const response = await fetch('api/videos/:id/get') // wherever your API is
        const json = await response.json()
        this.url = json.url // wherever this property is
      }
    }
  }
</script>

【讨论】：

【解决方案2】：

谢谢，但我的链接有问题。我有 json，我有链接 https://www.youtube.com/watch?v=kqEfk801E94。如何将此链接放入 html 文档？我知道但没有嵌入的链接不能作为 html 元素（iframe）工作。这是真的吗？

【讨论】：

【解决方案3】：

我不知道您可以使用哪些工具将链接从 JSON 放入 HTML 文档，或者您正在使用的结构，但是如果您可以编写 JavaScript，您可以使用常规修改 URL 链接表达式将其从手表转换为嵌入 URL，然后您可以使用 document.querySelector 找到您的 iframe，然后更新 src 属性。

这一切都假设您有一个在您的 JSON 调用之后运行的函数。由于我不知道你的 JSON 机制，我假设你已经在一个名为 json 的变量中拥有 JSON 字符串。这是一个示例脚本：

function getEmbedUrlFrom(json) {
  const data = JSON.parse(json)
  const url = data.url
  const embedUrl = url.replace(/watch\?v=/, 'embed/')
  return embedUrl
}

function updateIframeUrl(url) {
  const iframe = document.querySelector('iframe')
  iframe.src = url
}

updateIframeUrl(getEmbedUrlFrom(json))

【讨论】：