I am using a jquery lightbox plugin on a Wordpress site that opens videos fetched from rss in lighbox and I want to be able to construct a URL like which will send the user to my website and open the video on pageload. This with several videos on the same page.
Then display a button with each videos unique url as a sharebutton.
From googling around something like this could be a way?
jquery get
pass query param with unique url
jquery to open lightbox
jquery to load video plugin (youtube etc.)
Im not good at either jquery or vanilla js, but trying to grasp the concept. Any help appreciated.
Using a URL Query param is a good option to accomplish this. What we'll do is have a script that checks whether or not the Param exists. I've included code on how to do this. It's all done in javascript.
//This function will check if the current page has the query param of 'video' (or whatever you set it to) & then call your lightbox function.
//Put this in the footer of that page
function checkParam() {
var isVideo = getParameterByName('video');
if(isVideo == 'true') {
//call lightbox open function
}
}
checkParam();
//I'll use this function to get URL query params: http://stackoverflow.com/a/901144/2106563
//This should also go in the footer of the page
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
As for adding a youtube video within your lightbox, it can be done pretty easily with a link similar to this:
href="//www.youtube.com/embed/dQw4w9WgXcQ?feature=player_detailpage&rel=0&autoplay=1
The only part that you need to change between videos is: dQw4w9WgXcQ. That can be seen in the URL in the browser.
You'll notice that there are Query Params in the URL. One of them is autoplay. There are a bunch of others too if you wish to customize the link a bit more.
Related
I want to, in my init() function, check to see if the video is either a youtube URL or a file name.
Does this seem suitable or is there some kind of edge case I might be missing?
function init(){
playerSource = Document.getElementById('vid').src;
if ( playerSource.includes("https://www.youtube") ){
//Call to function that begins setting up YT iFrame API
}
}
Thanks in advance!
You can validate the youtube URL using below regex.
regExp = /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
Youtube has different url forms depending upon where you are taking from
Normal Url
https://www.youtube.com/watch?v=12345678901
Share Url
https://youtu.be/12345678901
Share Url with start time
https://youtu.be/12345678901?t=6
Mobile browser url
https://m.youtube.com/watch?v=12345678901&list=RD12345678901&start_radio=1
Long url
https://www.youtube.com/watch?v=12345678901&list=RD12345678901&start_radio=1&rv=smKgVuS
Long url with start time
https://www.youtube.com/watch?v=12345678901&list=RD12345678901&start_radio=1&rv=12345678901&t=38
You can check these URL validation below
https://regex101.com/r/7a1lGH/1
I've been using the following for inserting urls for digital ads
var clickTag = "http://www.example.com";
<a href="javascript:window.open(window.clickTag)">
The company I work for sets up tracking URLs that we have been manually putting into ads and sending to media partners. It was recently requested by some of them that I instead use this function in their guidelines instead, which is based on the latest iab guidelines:
function getParameterByName(name) {
var match = RegExp('[?&]' + name +
'=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
var clickTag = getParameterByName('clickTag');
<a href="javascript:window.open(clickTag, ‘_blank’);">
I guess what I need help understanding is where the URL goes in this version that I was previously adding as the var clickTag in the first version?
Just got word from a media partner that we aren't supposed to be adding the links ourselves and instead using the script based on the iab guidelines and they add the link as part of the upload process. Problem solved.
I am building a jQuery based web app and I want to use URL parameters to navigate around it.
I would like to display content based on the URL parameter, with the 'load()' function getting the main body of the web page from an external URL and replacing an element with it.
How would I create an if statement that use the following conditions...
If there are no parameters in the url, then use $("#toBeReplaced").load("home.txt");
If the parameter page is equal to about, then use $("#toBeReplaced").load("about.txt");
If the parameter page is equal to contact, then use $("#toBeReplaced").load("contact.txt");
...to determine what page of the app to display.
You can simply load the url using page variable if it is undefined then load home otherwise load whatever is in page variable.
var page = location.search.substring(1).split('=')[1];
if (page == undefined)
$("#toBeReplaced").load("home.txt");
else
$("#toBeReplaced").load(page + ".txt");
You can use different libraries or jQuery plugins to get url parameters in js. For this example I will use js-url. Include the url.min.js file into your page. Then just use this to get the parameter page by url("?page") and create a simple if.
$(function() {
var page = url("?page");
if( page === "about" ) {
$("#toBeReplaced").load("about.txt");
}
else if( page === "contact" ) {
$("#toBeReplaced").load("contact.txt");
}
else {
$("#toBeReplaced").load("home.txt");
}
});
My webpage contains some RSS feeds from some random sites.
There are links within these feeds which take you to these sites. Is there anyway to load these webpages into a div on my page?
The problem Im having is that these RSS links are created dynamically when I create my RSS feeds.
Dose anyone have any suggestions?
function showLTab(key)
{
var myObject = science[key];
var stage = $("#leftFeed").children('#tabContent');
//forming the query
//LIMT controls amount of tabs displayed in each feed
var query = "select * from feed where url='"+myObject.feed+"' LIMIT 5";
//changing URL to YQL
var url = "http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent(query)+"&format=json&callback=?";
$.getJSON(url,function(data){
//removes any previous feeds
stage.empty();
//item exists in RSS
$.each(data.query.results.item || data.query.results.entry,function(){
stage.append(myObject['function'](this));
})
});
$("#leftFeed").children('#activeTab').text(key);
}
function showLeftDropDown()
{
var activeTab = $("#leftFeed").children('#activeTab');
//creating drop down div
var dropDown = $('<div>').addClass('dropDownList').css({'top': 10, 'width': activeTab.width()}).hide().appendTo('#leftFeed');
$.each(science,function(i){
// populates dropdown div
if(i==activeTab.text()) return true;
$('<div>').text(i).appendTo(dropDown);
})
dropDown.slideDown('fast');
}
use this jquery
https://github.com/sdepold/jquery-rss
it will help u
If you know the URL of the page that interests you (that is to say, this question is about the display of the page and not the retrieval of the links) and simply want to spit out the result into a container such as a div, you can do this:
$("#myDiv").load("page url");
This passes an Ajax request to the given url and loads the content into the selected element. See http://api.jquery.com/load/ for more info.
Another option is using iframes. You can create an iframe and then set the src property to the url that you are interested in using JavaScript:
document.getElementById("myIframe").src = "page url";
Okay, so if you don't know the URL but have the feed that you can parse, try a regex. Given that links look like this:
<link>http://www.someexamplerssdomain.com/main.html</link>
You can use this code to parse them all out into an array:
var regex = /<link>(.*?)<\/link>/gi;
var matches = new Array();
var match = regex.exec(rssInput);
while (match != null) {
matches.push(match[1]);
match = regex.exec(rssInput);
}
You can then use either of the two methods I first suggested to retrieve their content.
I'm trying to dynamically set the thumbnail shown when sharing to Facebook using javascript. I tried adding the meta tag "og:image" to the page (it's a JSP) and that works, but what I want to do now is to replace such image with another one dynamically loaded by javascript.
Basically, the page is calling an API upon loading, using javascript, and retrieves a list of images. I want to use one of those as the thumbnail.
I tried using javascript to replace the content of the meta tag, but Facebook doesn't seem to care abou t it (it does change if I check with my browser).
Is it possible to do this?
Thanks in advance!
Here is a function I used to extract the image url from a flash object tag's flashvars parameter, and then assign it to a meta tag by using jquery:
$(window).load(function(){
//Use $(window).load() instead of $(document).ready(), so that the flash code has loaded and you have all the html you need process with javascript already in place when you start processing.
var stringToExtractFrom = $('param[name="flashvars"]').attr('value');
//Get the flashvars parameter value which we'll use to extract the preview image url from.
var pos = stringToExtractFrom.indexOf("&");
//Search for the position ampersand symbols which surround the image url.
var stringToUse;
//The final string we'll use.
var startOfImageSrc = null;
//The first position where we discover the ampersand
var endOfImageSrc;
//The second position where we discover the ampersand
var lengthToSubstract
//How many symbols to chop off the flashvars value.
while(pos > -1) {
if(startOfImageSrc == null){
startOfImageSrc = pos;
}
else {
endOfImageSrc = pos;
lengthToSubstract = endOfImageSrc - startOfImageSrc;
}
pos = stringToExtractFrom.indexOf("&", pos+1);
}
stringToUse = stringToExtractFrom.substr(startOfImageSrc+7, lengthToSubstract-7);
$('meta[property="og:image"]').attr('content', stringToUse); });
Facebook robot never runs a java script code
but why you don't try to set og tags in in server-side ?