I have been trying to Magnific Popup (a lightbox) to load facebook video embed iframes. Previously I was using PrettyPhoto, however I wanted to make the switch. Strangely, utilizing the same methodology I have in the following codepen the iframe fails to load properly (e.g. within the bounds of the player) for Facebook. I realized the same thing was happening with PrettyPhoto, and I believe that Facebook might have made a change.
<a class="video" href="http://www.facebook.com/video/embed/?_rdr=p&video_id=1291445700871053">Open Facebook video here</a>
JS
$('.video').magnificPopup({
type: 'iframe'
});
Does anyone know how to mitigate this issue?
http://codepen.io/afagard/pen/YWyoOP
It seems like Facebook changed the HTML they created for the embed_html version of the video player.
You can use this link instead to make that work:
https://www.facebook.com/v2.5/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fvideo.php%3Fv%3D{VIDEO_ID}
(You should change the {VIDEO_ID} at the end of the link with the ID of your video).
Your complete code should look like this:
<!doctype html>
<html lang="en">
<head>
<title>Video Test</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://dimsemenov-static.s3.amazonaws.com/dist/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://dimsemenov-static.s3.amazonaws.com/dist/magnific-popup.css" />
</head>
<body>
<a class="video" href="https://www.facebook.com/v2.5/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fvideo.php%3Fv%3D1291445700871053
">Open Facebook video here</a>
<br><br><br>
<a class="video" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Open Youtube video here</a>
<script type="text/javascript">
$('.video').magnificPopup({
type: 'iframe'
});
</script>
</body>
</html>
Facebook has updated their video embed URL. Try this
https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2{PAGE_NAME}%2Fvideos%2F{VIDEO_ID}%2F
This URL you can get by embedding a video on facebook.
Related
I want to open an audio control in a new window and pass the filename to the audio control from an MVC5 View.
I am able to open a simple html page with the following code in the MVC5 view:
<a href="Music/Music.html"
onclick="window.open('Music/Music.html',
'newwindow',
'width=600,height=200');
return false;">html Link</a>
Then the Music.html page loads and plays the file using this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<audio controls>
<source src="001.mp3" type="audio/mp3"> audio playback requires IE9 or above
</audio>
</body>
</html>
That all works great, but I really want to pass the filename to the new page so the src is loaded with whatever filename I pass. I do not how to do this, or if there is a better more efficient way to do this using other features of MVC5.
Added after original post based on Joe Warner's proposed answer:
This code is placed in index.vbhtml for the Home controller:
#Code
Dim myUrl As String = "Music/Music.html?003.mp3"
End Code
<a href="#myUrl"
onclick="window.open('#myUrl','_blank','width=600,height=100');
return false;">
html link a
</a>
<a href="#myUrl" onclick="myOpenWindow">
html link b
</a>
#Section Scripts
<script type="text/javascript">
function myOpenWindow() {
window.open('#myUrl', '_blank', 'width=600,height=100').focus();
}
</script>
End Section
This is the target Music.html page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<audio controls>
<source src="" id="audio" type="audio/mp3"> audio playback requires IE9 or above
</audio>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('audio').src = window.location.search.substr(1)
});
</script>
</body>
</html>
For both html link a and html link b the target Music.html page loads and plays the 003.mp3. But html link a opens a new window and html link b replaces the existing window.
I'm certain I'm making a basic mistake, but why can't I move the inline window.open javascript into a function so it can be called by other elements that might exist on the page?
html Link
attach a function to the on click then open the window with '_blank' this opens the document in a new window or tab.
function openWindow() {
window.open("/Music/Music.html?filenameyouwant", "_blank",
"width=600, height=200"
).focus();
}
Add an id to the source HTML
<source src="001.mp3" id="audio" type="audio/mp3">
Then select it using javascript and set the src of it to the end of the url you've gone to you'll want to wrap the getting of the url param till after the dom has loaded otherwise there will be no source element
?filenameyouwant
document.addEventListener("DOMContentLoaded", (event) => {
document.getElementById('audio').src = window.location.search.substr(1)
});
I have an area control which is having href="http://google.com" I want to open this URL as pop in frame.
Area code is as follows:
<area tabindex="61" alt="" id="ar1" title="" href="http://google.com"
style="text-decoration:none;" target="_top" shape="poly"
coords="123,169,123,237,146,237,146,169"></area>
I am not generating any area control. The area control is being generated from SSRS report and this SSRS report is not assigning any id for area.
I have googled a lot but does not get success so I have posted it here.
SSRS is generating report like the below image.
.
SSRS is generating dynamic URL and each bar having different URL and it may be any server name in the globe (e.g. 1 bar has URL of google another has URL of apple)
you can use like this... I am giving a theme how can you achieve this...
<html>
<head>
<title>Test IFrame SRC by Javascript </title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function () {
$("#button").click(function () {
$("#frame").attr("src", "http://www.dotnetschools.com/");
})
});
</script>
</head>
<body>
<div id="mydiv">
<iframe id="frame" src="" width="100%" height="300"></iframe>
</div>
<button id="button">Load</button>
</body>
</html>
As you can see on above example on button click, I am opening a url inside a iframe. you can just do that.
Thanks
I have removed target="_top" and it start working for me.
This application having too many Frame, frameset & iframe nesting. somewhere it was causing issue due to target="_top".
I've registered a practice app for soundcloud in order to get a client id. My app doesn't have an official site because I don't want to register a domain. I'm just trying to learn how to use soundcloud using a .html and .js file. I've followed the API tutorials exactly, but nothing happens whenever I try to use soundcloud. I initialized SC using my client ID, and have imported JQuery and everything I need to. Thanks for the help
my html file (practice.html):
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//connect.soundcloud.com/sdk.js"></script>
<script src= "script.js"></script>
</head>
<body>
<div id="player"></div>
</body>
</html>
my .js file (script.js):
SC.initialize({
client_id: 'the client id they gave me...'
});
$(document).ready(function() {
SC.get('/tracks/293', function(track) {
SC.oEmbed(track.permalink_url, document.getElementById('player'));
});
});
Again, nothing happens when I load the page...
Looks like you're missing the full url for the SoundCloud JavaScript SDK (missing http:):
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src= "script.js"></script>
</head>
<body>
<div id="player"></div>
</body>
</html>
You should be able to run this locally within your browser as SoundCloud supports Cross Origin Resource Sharing headers, removing the restriction on XSS: Of CORS We Do
I have a page with an iframe in it. I put on a code where the page will redirect to the home page if user is inactive for x number of seconds(absence of keydown and mousemove). My problem is the code only works in the mother page but does not detect the mousemove and keydown in the iframe, thus making it redirect everytime inside the iframe despite activity. I tried calling a function in the onload event of the iframe but this doesn't ssem to work. Here is the code for the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SAMPLE</title>
<link href="main.css" rel="stylesheet" type="text/css" media="screen" />
<script language="javascript">
function redirect()
{
var timer;
window.onload= document.onmousemove= document.onkeypress= function(){
clearTimeout(timer);
timer=setTimeout(function(){location= 'index.html'},3000);
}
}
</script>
</head>
<body bgcolor="blue" onLoad="redirect();">
<iframe src="http://tplink.teleperformanceusa.com" frameBorder="0" width="100%" height="800px" onLoad="redirect();"></iframe>
...
</body>
</html>
any help would be appreciated. Thank you!
You have your iframe set to 100% width and 800px height. That is almost all of your webpage.
Iframes were designed to insert responsive sections of other webpages into a page. In your code it looks like the whole of the page is the iframe. So you have to ask yourself, why do you need the iframe if it is almost all the page? Why not just link to the page?
Basically the 'motherpage' will not detect movement and activity in the iframe becuase it is outside of its control, and therefore will action the script you have written. The only activity taking place is on the webpage you are linking to in the iframe.
Try to avoid iframes.
Here's the scene:
The webpage doesn't have a google+ button.
User clicks a button.
AJAX request is sent which loads some text and the google+ button (<g:plusone href="http://www.website.com"></g:plusone>)
into a div.
I can see when I look at the code that it is there, but it is not rendering.
I've heard that this might be useful:
gapi.plusone.go();
But I'm not sure.
Any ideas?
Thanks
You're on the right track. gapi.plusone.go() is one way to explicitly render the +1 button. Here's a code snippet from the official docs that illustrates another method using gapi.plusone.render().
<html>
<head>
<title>+1 Demo: Explicit render</title>
<link rel="canonical" href="http://www.example.com" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
function renderPlusone() {
gapi.plusone.render("plusone-div");
}
</script>
</head>
<body>
Render the +1 button
<div id="plusone-div"></div>
</body>
</html>
The JavaScript API is further documented elsewhere on the previously linked page.