How do I embed youtube videos into wordpress with javascript

Question

anyone know a way to embed a YouTube video in javascript? or a way to run a shortcode on a page in javascript? I need a way to pass a javascript variable into a youtube url and embed the video. The code I have so far is using a plugin that runs this code as a shortcode on a page. using a plugin called Shortcoder.

I've done a lot of research and usually don't make new posts, but I can't seem to find the answer to this basic question. How do I embed a youtube video (or run a shortcode) from javascript. one thing I found is 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 that I'm using to get the variable.

<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

}

I need a way to embed a youtube video, or run the shortcode for the youtube wordpress plugin, but need the video url to be effected by my website url.

example: www.example.com/video/?v=Y123 should display the youtube video www.youtube.com/watch?v=Y123, and www.example.com/video/?v=x456 should display the youtube video www.youtube.com/watch?v=x456

I'm basically creating a youtube page for my videos, but plan to add a live chat that subs watching from my website can use from anywhere on the site while watching. I could also, possibly sometime in the future, add auto-pause videos for tutorials.

does anyone know a way to embed a YouTube video in javascript or a way to run a shortcode on a page in javascript?

a shortcode is prefered because it would remove a few extra limits and make future implementation of javascript into wordpress much easier.

Edit: also, I'm a bit new to wordpress, although have some experience in android studio.

can you provide an example on how to embed youtube videos with raw javascript? — SwiftNinjaPro
Sorry, it will take a bit, I made a simplifier that uses YouTube videos as advertisements — DarkHeart Productions
I assume wordpress works with js, so when you get the video Id, create the element with word press and integrate using the YouTube api, when doing it, enter your id in the spot from wordpress — DarkHeart Productions

DarkHeart Productions DarkHeart Productions · Accepted Answer · 2018-11-22T04:57:52

videoId: The id after your video, ie, the video is of this is "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'});
}

The difference between my code and their's is mine adds the script using JavaScript, theirs adds it using HTML and then JavaScript to run it.

Documentation https://developers.google.com/youtube/iframe_api_reference

How do I embed youtube videos into wordpress with javascript

2 Answers