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.
Related
The Youtube player loads correctly, but the videos display a playback error when hitting play, and thumbnails do not load either. Could someone point out what I might be doing wrong.
$(document).ready(function(){
var API_KEY = ""; // Did not include API here but I have it included it my code
var search = "soccer";
var video = '';
videoSearch(API_KEY, search);
function videoSearch(API_KEY, search){
$.get("https://www.googleapis.com/youtube/v3/search?key=" + API_KEY
+ "&type=video&part=snippet&maxResults=12&q=" + search, function(data){
console.log(data);
data.items.forEach(item => {
video = `
<iframe width="420" height="315" src="http://www.youtube.com/embed/$(item.id.videoId)" frameborder="0" allowfullscreen></iframe>
`
$("#videos").append(video);
});
})
}
})
Try replacing your colons with braces.
e.g. $(item.id.videoId) to ${item.id.videoId}
I do not know much Javascript and I am trying to pass query string parameters to an embedded iframe.
Here is the url I am trying to retrieve query parameters from:
https://usslc.clickfunnels.com/optin1612360116340?contactId=924408&inf_contact_key=ea845fcb8c29d976c0755e8b56134056cc0558ed5d4c28cbfab114022b1ec50d&inf_field_BrowserLanguage=en-US%2Cen%3Bq%3D0.9&inf_field_FirstName=PG2&inf_field_Email=preston%2Btest2%40behavioralmedia.com&inf_field_Phone1=5554445555
Here is the code I need for the iframe:
<iframe src="https://app.squarespacescheduling.com/schedule.php?owner=21917237&appointmentType=20129186" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe><script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>
This is what I have been working on and not getting any luck with:
<iframe id="myIframe" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe>
<script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript">
let myIframe = document.getElementById("myIframe");
let src = "https://app.squarespacescheduling.com/schedule.php?owner=21917237&appointmentType=20129186"
let url = window.location.href;
let name = url.searchParams.get("inf_field_FirstName");
let email = url.searchParams.get("inf_field_Email")
let phone = url.searchParams.get("inf_field_Phone1")
let adsURL = src+"&firstName="+name+"&email="+email+"&phone="+phone;
myIframe.src = adsURL;
</script>
Again, I am a total noob with stuff like this so sorry if this is real bush league.
What is the best way to have the name, phone, and email prepopulate in the iframe?
Thanks!
Accessing an iframe that already exists on the page can be tough, if not impossible.
If you only need to have the desired fields w/ the iframe on page load then you could instead generate the iframe in the script tag and append it to the document like so:
<div id="frameWrapper"></div>
<script>
const url = window.location.href;
const frameWrapper = document.getElementById('frameWrapper');
const BASE_URL = 'https://app.squarespacescheduling.com/schedule.php?owner=21917237&appointmentType=20129186';
const frameElem = document.createElement("iframe");
frameElem.src = `${BASE_URL}` +
`&name=${url.searchParams.get("inf_field_FirstName")}` +
`&email=${url.searchParams.get("inf_field_Email")}` +
`&phone=${url.searchParams.get("inf_field_Phone1")}`;
frameElem.name = url.searchParams.get("inf_field_FirstName");
frameElem.title = "Schedule Appointment"
frameElem.style.height = "100%";
frameElem.style.width = "100%";
frameContainer.appendChild(frameElem);
</script>
In this case we are just replacing the iframe with a wrapper DIV, assembling the iframe in our script tag and appending it to the wrapper.
So, first, I created a youtube search engine using javascript and youtube data API. Then I wanted to play the videos from the search results by clicking them. So I made a button for each result that passes the videoID variable to the playVideo() function (which swap the iframe link and refreshes it). But all the buttons in each result returns the same video ID which is the first result's video ID. How to fix this?
this is my code:
thank you
//the search function
function search(){
//clr results
$('#results').html('');
$('#buttons').html('');
//get input val
query = $('#query').val();
//GET request on Youtube API V3
$.get(
"https://www.googleapis.com/youtube/v3/search",{
part: 'snippet, id',
q: query,
type: 'video',
key: my_apiKey},
function(data){
var nextPageToken = data.nextPageToken;
var prevPageToken = data.prevPageToken;
console.log(data);
$.each(data.items, function(i, item){
//custom function to get request output
var output = getOutput(item);
$('#results').append(output);
});
//page buttons
var buttons = pageBtn(prevPageToken, nextPageToken);
$('#buttons').append(buttons);
}
);
}
//build the output
function getOutput(item){
var vidId = item.id.videoId;
var title = item.snippet.title;
var img = item.snippet.thumbnails.high.url;
var output ='<tr>' +
'<td><img src="'+img+'" width="90px"/></td>'+
'<td>'+title+' '+vidId+'</td>'+
'<td><button id="play-video" data-url="http://www.youtube.com/embed/'+vidId+'?autoplay=1" onclick="playVideo();">Play</td>'+
'</tr>';
return output;
}
//play video
function playVideo(){
var vidurl = $('#play-video').data('url');
$("#player").html('<iframe type="text/html" width="640" height="390" src="'+vidurl+'" frameborder="0"></iframe>');
}
I managed to make it work by checking this related SO post. Here is my partial code:
vidIframe = '<button class="play-video" data-url="http://www.youtube.com/embed/'+item.id.videoId +'?autoplay=1" onclick="playVideo(this)">'+item.id.videoId +'</button>';
//play video
function playVideo(element){
var vidurl = $(element).data('url');
console.log(vidurl);
$("#player").html('<iframe type="text/html" width="640" height="390" src="'+vidurl+'" frameborder="0"></iframe>');
}
The initial code got confused since all your target has the same id which I think will only get the value of the first index. In this updated code, even though they still have the same id value each call will get the attribute of the one performing the onclick event (indexed).
The code below is sending a URL of a image which I would like to display with the div ID being 'target', so far I can only display the actual URL address instead of the actual image.
<script type='text/javascript'>
function updateTarget( img ){
'use strict';
document.getElementById('target').innerHTML = img;
}
</script>
Target div
<div id = 'target'> </div>
Any help would be appreciated as I am struggling to find any useful examples online.
Use this line:
document.getElementById('target').innerHtml = '<img src="' +img+'"/>';
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.
}
});