We Keep Coding

Pass all URL querystring parameters to an iframe using JavaScript

I want to pass all parameters from the querystring to an iframe on my page using JavaScript. I created a <div if="zohoframe"> before which the iframe should be inserted. This JavaScript should do the magic but it shows neither an error nor the iframe.
<script type="text/javascript">
const queryString = window.location.search;
var makediv = document.createElement("div");
makediv.innerHTML = '<iframe loading="lazy" width="100%" height="750px" src="SOMEURL' + queryString + '" frameborder="0" allowfullscreen=""> </iframe>';
var getRef = document.getElementById("zohoframe");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(makediv, getRef);
</script>

Getting Facebook video ID using jQuery

I've made a script that gets the ID for YouTube and Vimeo, but I am not sure how to get the ID from the Facebook embed URL.
Example embed:
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FHammers.Serbia.Official%2Fvideos%2F1261009690594307%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
I need to get the ID which in this case is: 1261009690594307
How can I it with YouTube? I am new to JS so not sure how to replicate but getting the ID for this one.
$.each($('iframe[src*="youtube.com"]'), function() {
var player = $('<div class="video-player">');
var id = $(this).attr('src');
id = id.substr(id.lastIndexOf("/")+1);
player.attr('data-id', id);
player.html(videoThumbYT(id));
player.on('click', videoIframeYT);
var videoContainer = $('<div class="video-container">');
videoContainer.append(player);
$(this).replaceWith(videoContainer);
});

Fastest using the Regular Expressions.
function fbvideoID(frame) {
var myRegexp = /2F(\d+)%/g;
var match = myRegexp.exec(frame);
return match[1];
}
var facebookVideo = '<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FHammers.Serbia.Official%2Fvideos%2F1261009690594307%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>';
document.write(fbvideoID(myString)); //returns ID 1261009690594307
Explanation
Regular Expression
/2F(\d+)%/g
Selects the ID. Test it here!
var match = myRegexp.exec(frame);
Returns array of two elements. Documentation here.
0: "2F1261009690594307%"
1: "1261009690594307"
The 0 index is always the whole expression. The 1 is only the (\d+) - braces. Which contains our ID.
Hope I helped you!

Here's one approach, could be refined a bit.
$.each($('iframe[src*="facebook.com/plugins/video"]'), function() {
var url = decodeURIComponent($(this).attr('src'));
var id = url.match(/\/\d+\//);
if (id) {
id = id.slice(1,-1);
console.log(id);
//do your player stuff here.
}
});

How to embed a Youtube Video using the URL inserted from an input

so I'm trying to have a youtube video embedded in my webpage. To embed it I need to use the URL that the user inserted in an input. What would be the jquery/JavaScript I need to use to embed the video?

Create an iframe
<iframe id="myVid" width="420" height="315"
src="">
</iframe>
Then grab the input from the user preferably the url and pass it with jquery
$('#myVid').attr('src', "user-supplied-url")

Formatted code from #theDoctor
function getId(url) {
var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var match = url.match(regExp);
if (match && match[2].length == 11) {
return match[2];
} else {
return 'error';
}
}
var myId;
$(document).ready(function() {
$('#embed1').click(function() {
var myUrl = $('#URL1').val();
myId = getId(myUrl);
$('#youtubeID1').html(myId);
$('#youtube1').html('<iframe width="560" height="315" src="//www.youtube.com/embed/' + myId + '" frameborder="0" allowfullscreen></iframe>');
});
});

Display Only the List of a YouTube Playlist Page

If I have a playlist url, say "https://www.youtube.com/playlist?list=PLRU-B1PBK4Buu_yoMI8V-eTel9O3gVMpB" and I put it in an iframe with:
<iframe src="http://www.youtube.com/playlist?list=UUK376qNDlNZZDNHsnaWuTeg" width ="1920" height="1080"></iframe>
I get a blank iFrame, so how do I fix that? Also, I only want to display the "pl-video-list" div, not the rest of the web page. The other responses on stackoverflow were all website specific, or didn't seem to work.

Another option extract playlist using JQuery
<script>
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/UUK376qNDlNZZDNHsnaWuTeg?v=2&alt=json&callback=?';
var videoURL= 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function(data) {
var list_data="";
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var url = videoURL + videoID;
list_data += '<br><br>'+ feedTitle+'';
});
$(list_data).appendTo(".playlist");
});
</script>
<ul class="playlist"></ul>
http://jsfiddle.net/jamie8763/g5unx78b/

This probably isn't the answer your were looking for but <iframe width="560" height="315" src="http://www.youtube.com/embed/videoseries?list=PLRU-B1PBK4Buu_yoMI8V-eTel9O3gVMpB" frameborder="0" allowfullscreen></iframe> allows you to view the first video in the playlist with a dropdown to view the rest of the playlist.
As for your blank iframe, I am getting the following error when I try it.
Refused to display
'https://www.youtube.com/playlist?list=PLRU-B1PBK4Buu_yoMI8V-eTel9O3gVMpB'
in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
As far as I know, there isn't a way to scecify a certain div to display in an iframe. It's either all or nothing.

Replacing youtube image placeholders to video

I have a jquery function which replaces a Link within two values with an image for e.g
<div class="comment">
[youtube]http://www.youtube.com/watch?v=T1hf4B5pyjQ&feature=grec_index[/youtube]
random text
</div>
will be output as
<div class="comment"><img width="420" height="315" src="http://i4.ytimg.com/vi/T1hf4B5pyjQ/hqdefault.jpg"></img>
random text
</div>
with this function below
var youtubeTag = /\[youtube]https?:\/\/(?:www\.)?youtu(?:be\.com|\.be)\/(?:watch\?v=|v\/)?([A-Za-z0-9_-]+)([a-zA-Z&=;_+0-9*#-]*?)\[\/youtube]/,
youtubeHTML = '<img width="420" height="315" src="http://i4.ytimg.com/vi/$1/hqdefault.jpg"></img>';
$(".comment").each(function(){
var $this = $(this);
$this.html($this.html().replace(youtubeTag, youtubeHTML))
});
what I'm trying to do is onclicking the image replace youtubeHTML with youtubeIFRAME i have tried this below or check it out on JSFIDDLE http://jsfiddle.net/yusaf/uLTzw/28/
var youtubeTag = /\[youtube]https?:\/\/(?:www\.)?youtu(?:be\.com|\.be)\/(?:watch\?v=|v\/)?([A-Za-z0-9_-]+)([a-zA-Z&=;_+0-9*#-]*?)\[\/youtube]/,
youtubeHTML = '<img width="420" height="315" src="http://i4.ytimg.com/vi/$1/hqdefault.jpg"></img>';
youtubeIFRAME = '<iframe width="420" height="315" src="http://www.youtube.com/embed/$1?rel=0" frameborder="0" allowfullscreen></iframe>';
$(".comment").each(function(){
var $this = $(this);
$this.html($this.html().replace(youtubeTag, youtubeHTML))
});
$("img").click(function(){
var $this = $(this);
$this.html($this.html().replace(youtubeHTML, youtubeIFRAME))
});

The problem is that $1 part inside youtubeHTML which is not allowing the handler to replace the HTML correctly.
One quick solution is to use data attribute on youtubeHTML and store the link also there. Then simply replace the $1 inside the youtubeIFRAME with the value of that data attribute.
Here is the snippet.
var youtubeTag = /\[youtube]https?:\/\/(?:www\.)?youtu(?:be\.com|\.be)\/(?:watch\?v=|v\/)?([A-Za-z0-9_-]+)([a-zA-Z&=;_+0-9*#-]*?)\[\/youtube]/;
var youtubeHTML = '<img width="420" data-address="$1" height="315" class="youtube" src="http://i4.ytimg.com/vi/$1/hqdefault.jpg"></img>';
var youtubeIFRAME = '<iframe width="420" height="315" class="youtube" src="http://www.youtube.com/embed/$1?rel=0" frameborder="0" allowfullscreen></iframe>';
$(".comment").each(function(){
var $this = $(this);
$this.html($this.html().replace(youtubeTag, youtubeHTML));
});
$("img.youtube").click(function(){
var $this = $(this);
$this.replaceWith(youtubeIFRAME.replace("$1", $this.attr("data-address")));
});
EDIT: In case anyone is interested in a way how to write some kind of short "click here" text over the placeholder images have a look here.