如何使用 javascript 将 youtube 视频嵌入到 wordpress 中

Question

有人知道在 javascript 中嵌入 YouTube 视频的方法吗？或者在 javascript 的页面上运行短代码的方法？我需要一种方法将 javascript 变量传递到 youtube url 并嵌入视频。到目前为止，我使用的代码是使用一个插件，该插件运行将该代码作为页面上的简码。使用名为 Shortcoder 的插件。

我做了很多研究，通常不发新帖，但我似乎找不到这个基本问题的答案。如何从 javascript 嵌入 YouTube 视频（或运行简码）。我发现的一件事是我用来获取变量的 this that shows embedding a video with flashplayer, but I would like to avoid flashplayer if possible, and need it to be in javascript so I can pass a variable. Here's the code I found on youtube 。

<script text="text/javascript">
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

var video = getUrlParameter('v');

if(video){
   console.log('v='+video);
   // embed video with url

}else {
   console.log('v=null');
   // embed youtube uploads playlist

}

我需要一种嵌入 youtube 视频的方法，或运行 youtube wordpress 插件的简码，但需要视频 url 才能受到我的网站 url 的影响。

示例：www.example.com/video/?v=Y123 应显示 youtube 视频 www.youtube.com/watch?v=Y123，并且 www.example .com/video/?v=x456 应该显示 youtube 视频 www.youtube.com/watch?v=x456

我基本上是在为我的视频创建一个 YouTube 页面，但计划添加一个实时聊天，从我的网站观看的订阅者可以在观看时在网站的任何地方使用。我也可以，可能在将来的某个时候，为教程添加自动暂停视频。

有谁知道在 javascript 中嵌入 YouTube 视频的方法或在 javascript 中的页面上运行短代码的方法？

首选短代码，因为它会消除一些额外的限制，并使 javascript 将来更容易在 wordpress 中实现。

编辑：另外，我对 wordpress 有点陌生，虽然在 android工作室。

Answer 1

videoId：你的视频后面的id，即这个视频是"1lD9G4D1p-Y" https://www.youtube.com/watch?v=1lD9G4D1p-Y

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

window.onYouTubePlayerAPIReady = function() {
        window.player = new YT.Player('elementId');
        window.player.cueVideoById({'videoId': 'yourVideoId',
          'suggestedQuality': 'medium'});
}

我的代码和他们的代码之间的区别是我的使用 JavaScript 添加脚本，他们使用 HTML 然后 JavaScript 添加脚本到运行它。

文档 https://developers.google.com/youtube/iframe_api_reference

Answer 2

好的，我想我想出了一个让它工作的方法。这是我的代码的样子，如果其他人需要的话：

<iframe name="videoURL" id="videoURL" width="560" height="315" src="https://www.youtube.com/embed/ymHNtBZxFKY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<script text="text/javascript">
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

var video = getUrlParameter('v');
var url;

if(video){
   console.log('v='+video);
   url = 'https://www.youtube.com/embed/'+video;
   // embed video with url

}else {
   console.log('v=null');
   // embed youtube uploads playlist
   url = 'https://www.youtube.com/embed?listType=playlist&list=UU7YyXO5sOuG4zmGlW7KDCNw'
}

  document.getElementById("videoURL").setAttribute("src", url);

</script>

如何使用 javascript 将 youtube 视频嵌入到 wordpress 中

How do I embed youtube videos into wordpress with javascript

javascript

embed

youtube

wordpress

video