I have embedded a video with magnificpopup script.
I am unable to remove related videos at the end of the reproduction of a youtbe embedded.
Here is the code I have tried:
<a class="popup-youtube" href="https://www.youtube.com/watch?rel=0&feature=player_detailpage&v=83UHRghhars">
but does not work.
The following code nor reproduce the video
<a class="popup-youtube" href="https://www.youtube.com/watch?feature=player_detailpage&v=83UHRghhars&rel=0">
if i put the embed code that youtube tell me:
//www.youtube.com/embed/83UHRghhars?rel=0
the video does not work. What I am doing wrong?
Here is a way to do it by adding additional javascript as demonstrated here.
<script>
jQuery(window).load(function(){
jQuery('a[href*="youtube.com/watch"]').magnificPopup({
type: 'iframe',
iframe: {
patterns: {
youtube: {
index: 'youtube.com',
id: 'v=',
src: '//www.youtube.com/embed/%id%?rel=0&autoplay=1'
}
}
}
});
});
</script>
You can remove the '&autoplay=1' if you do not need it.
There is an issue here. I did this workaround.
$('.js-home-video .js-popup-youtube').magnificPopup({
// your default config here
// All below settings are default except the rel attribute in youtube-src
// This is here to remove the related videos from showing up after the video ends
// Adding rel=0 from url in html template stopped autoplay, hence this hack
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button
patterns: {
youtube: {
index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
id: 'v=', // String that splits URL in a two parts, second part should be %id%
// Or null - full URL will be returned
// Or a function that should return %id%, for example:
// id: function(url) { return 'parsed id'; }
src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0' // URL that will be set as a source for iframe.
}
}
}
}
If you are using a mixed gallery (e.g. one of images and videos intermixed), then you might want to override how magnific popup builds the youtube embed.
The default for youtube are
youtube: {
index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
id: 'v=', // String that splits URL in a two parts, second part should be %id%
// Or null - full URL will be returned
// Or a function that should return %id%, for example:
// id: function(url) { return 'parsed id'; }
src: '//www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe.
}
This means that the ID is everything following v= and it simply takes that and sticks autoplay=1 at the end when creating the embed code.
To change this, you can pass in any special iframe youtube patterns to be used:
iframe: {
patterns: {
youtube: {
src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0&feature=player_detailpage'
}
}
}
Here, we adjusted the source so that it will build the embed using the id as normal and then stick your rel and feature parameters afterwards (along with autoplay)
If you do this, then leave your parameters off of the urls in the html mark up OR set the v= attribute at the end so that no extra parameters get tacked in when building the embed url.
The final look might be something like:
$('.gallery-list').magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled: true
},
iframe: {
patterns: {
youtube: {
src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0'
}
}
}
});
And your element might be:
<div class="gallery-list">
<a class="popup-youtube mfp-iframe" href="https://www.youtube.com/watch?v=83UHRghhars">Click here</a>
<img class="mfp-image" href="http://domain/image.jpg" width="100" height="200" />
</div>
The mfp-iframe class on the video link tells magnific to use iframe functionality.
The initialization code above told magnific to use image by default, but the mfp-iframe css class will override that for a video.
Now, when someone clicks the video, magnific popup should grab the video id via the v= parameter and then build the embed code by using the id and then tacking on the extra autoplay and rel url parameters.
1) Go to jquery.magnific-popup.min.js or jquery.magnific-popup.js, whatever you embed on your website.
2) Use your text editor to Search and Replace as follows:
Search: youtube.com/embed/%id%?autoplay=1
Replace: youtube.com/embed/%id%?rel=0&autoplay=1
3) Hit 'Save'.
Voilà
Related
How can I show in 1 view all the vidoes in a directory? What is the best approach for this? Here is the simple code I am using for 1 video. Also is there a way to disable right click download?
Thanks!
<video controls="controls" width="465" height="315">
<source src="~/Videos/Bunny2.mp4" type="video/mp4">
</video>
The Directory.EnumerateFiles method will provide a list of files in a directory. It returns just a list of full filepath strings. I'd use that in a class constructor, pulling info like Name and Type out of the string, and do something like this:
// Controller action
public ActionResult GetVideos()
{
var videos = Directory.EnumerateFiles("Videos/");
var videoList = new List<Video>();
foreach (var video in videos)
{
videoList.Add(new Video(video));
}
return View(videoList);
}
// Razor view
#model IEnumerable<Video>
#foreach (var video in Model)
{
<video controls="controls" width="465" height="315">
<source src="#video.Source" type="#video.Type">
</video>
}
To prevent download, disable the context menu. The MDN Element: contextmenu event has the following to disable this, though I would use a class you've applied to all the video elements.
noContext = document.getElementById('noContextMenu');
noContext.addEventListener('contextmenu', e => {
e.preventDefault();
});
On my site, I want to have users watch an embedded YouTube video without leaving the page, but I don't want to have the not so stylistic YouTube embed visible prior to clicking.
This is entirely doable on desktop, as you can use the YouTube JavaScript API to trigger the embed to play, but on iOS, programmatic triggering of the player to play is blocked. So how can I do this on iOS?
When thinking about this problem, I thought that one alternative route would be to have a layer that's opaque and styled, but you could click through it. This would mean the user thinks they're clicking a pretty button, when actually they're just clicking the embed to play.
Turns out there's a way of doing this, using the fancy (unofficial) CSS pointer-events property! Setting this to none means that clicks don't register, and instead punch straight through the element to whatever is behind it. In this case, the YouTube embed iframe. Support is iOS 6+.
Here's a JSFiddle of it working.
Note this is for iOS (and maybe Android) - it utilises the behaviour in which the video will automatically go full screen when it starts playing. If you watch this on desktop, the overlay remains.. overlaid.
There's some more polishing to be done with this to get it schmick:
Handling the initial click and altering the UI so they know immediately the video is kicking off. Perhaps hide the overlay, fade it, or change it to simply signify "Loading... "
On finish, resetting the video by recreating the iframe
You could do some tricky stuff with this technique, e.g. having a small player iframe overlaid by a small button. Still going to go fullscreen, so it'll work fine.
But regardless, there you go - proof of concept of playing a YouTube video on iOS without the user knowing they clicked on an embed.
iOS allows to call HTMLMediaElement.play function only from dispatched (triggered) by an user event (for example, from a "click" event handler).
Thus the code like this will work in iOS (because the player.playVideo is called from the dispatched by an user "click" event):
<div class="video">
Play
<iframe width="560" height="315" src="https://www.youtube.com/embed/pqLVAeoRavo?enablejsapi=1" frameborder="0" allowfullscreen allow="autoplay"></iframe>
</div>
<script>
(function() {
var player;
window.onYouTubeIframeAPIReady = function() {
new YT.Player(document.querySelector('.video iframe'), {
events: {
onReady: function(e) {
player = e.target
}
}
})
}
document.querySelector('.video .play').addEventListener('click', function(e) {
e.preventDefault()
player.playVideo()
})
})()
</script>
<script src="https://www.youtube.com/iframe_api"></script>
And the code like this will work in iOS too (because the initial call (the playMyVideo()) is still in the "click" event):
<div class="video">
Play
<iframe width="560" height="315" src="https://www.youtube.com/embed/pqLVAeoRavo?enablejsapi=1" frameborder="0" allowfullscreen allow="autoplay"></iframe>
</div>
<script>
(function() {
var playMyVideo;
window.onYouTubeIframeAPIReady = function() {
new YT.Player(document.querySelector('.video iframe'), {
events: {
onReady: function(e) {
playMyVideo = function() {
var player = e.target
player.playVideo()
}
}
}
})
}
document.querySelector('.video .play').addEventListener('click', function(e) {
e.preventDefault()
playMyVideo()
})
})()
</script>
<script src="https://www.youtube.com/iframe_api"></script>
But the code like this will not work in iOS (because the player.playVideo is called from the https://www.youtube.com/iframe_api script and not from the "click" event; i.e. only the window.onYouTubeIframeAPIReady function declaration is presented in the "click" event and window.onYouTubeIframeAPIReady is called from the https://www.youtube.com/iframe_api script):
<div class="video">
Play
<iframe width="560" height="315" src="https://www.youtube.com/embed/pqLVAeoRavo?enablejsapi=1" frameborder="0" allowfullscreen allow="autoplay"></iframe>
</div>
<script>
(function() {
document.querySelector('.video .play').addEventListener('click', function(e) {
e.preventDefault()
window.onYouTubeIframeAPIReady = function() {
new YT.Player(document.querySelector('.video iframe'), {
events: {
onReady: function(e) {
var player = e.target
player.playVideo()
}
}
})
}
var tag = document.createElement('script')
tag.src = 'https://www.youtube.com/iframe_api'
var firstScriptTag = document.getElementsByTagName('script')[0]
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
})
})()
</script>
I am using dailymotion api to play videos. Example is straight from the docs:
http://www.dailymotion.com/doc/api/player.html#api-reference
And its giving me errors in console:
<!-- This <div> tag will be replaced the <iframe> video player -->
<div id="player"></div>
<script>
// This code loads the Dailymotion Javascript SDK asynchronously.
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//api.dmcdn.net/all.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
}());
// This function init the player once the SDK is loaded
window.dmAsyncInit = function()
{
// PARAMS is a javascript object containing parameters to pass to the player if any (eg: {autoplay: 1})
var player = DM.player("player", {video: "x1bpnpt", width: "640", height: "360", params: {autoplay: 1}});
// 4. We can attach some events on the player (using standard DOM events)
player.addEventListener("apiready", function(e)
{
e.target.play();
});
};
</script>
http://jsfiddle.net/WpbJH/
But if I embed it directly in iframe then it works (it also displays some errors but not the ones from above):
<iframe src="http://www.dailymotion.com/embed/video/x1bpnpt?api=true&autoplay=1" width="640" height="360" frameborder="0"></iframe>
http://jsfiddle.net/MWhdC/
What is wrong?
As i am looking on it , js file is not proper loaded , please look at
e.src = document.location.protocol + '//api.dmcdn.net/all.js'; line
document.location.protocol prefix domain infront of //api.dmcdn.net/all.js .
So please look at it and let me know .
After few research, I found what cause this issue.
The video they are using as example gets report from third party advertising group, and need to report to it every step of the video.
Upload a video of your own, and use the id you get from it, you will see that you will not have console errors.
Hope that was helpful.
Let me explain my scenario. I want to use Youtube IFrame API to embed some videos on my website.
I tested the video with id wdGZBRAwW74 (https://www.youtube.com/watch?v=wdGZBRAwW74) on this page: Youtube IFrame Player Demo. And it works OK.
I try this example code:
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'wdGZBRAwW74',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onPlayerError
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function onPlayerError(event){
console.log(event.data);
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
with some virtual host domains on my localhost and i got result:
with domain app.centaur.com/youtube/index.htm: IFrame API work OK, the video play without problems.
with domain app.music.com/youtube/index.html: IFrame API work OK, but the video can not play, API fires onError with error 150 and the embedded player show message "This video contains content from VEVO, who has blocked it from display on this website. Watch on Youtube"
with domain app.musiccentaur.com/youtube/index.htm: like first case, everything work ok
with domain app.centaurmusic.com/youtube/: like first case, everything work ok
As i know error 150 stand for "The owner of the requested video does not allow it to be played in embedded players". But i see it still work in case 1, 3, 4, so what is it mean ?
Seem all of videos by Vevo related to this problems. I'm not sure if Vevo defined some policy for embedding their videos.
Maybe the problem come from my domain music.com, but i'm not sure there is some rules of domain to embed Vevo's video on websites.
What if i buy a domain for my website then i got error 150, this is so bad. :(
Is there anyone deal with this before? Please give me some solutions. Thanks in advance.
Note: this error only occurs on Vevo's videos.
Content owners are allowed to set up a white/black list of domain names on which embedding is allowed/denied. There is no way to work around these restriction.
This blog post has a bit more info about content restrictions in general: http://apiblog.youtube.com/2011/12/understanding-playback-restrictions.html
I am trying to get a website that runs fullscreen for all pages, I have looked over here: iPad WebApp Full Screen in Safari and followed that and my index page fills the screen just nicely, but whenever I click a link to another page even though that page is all setup with the meta tags it pulls the chrome bar back in and all the alignment goes out.
There must be a way or is that a limitation of safari that will be fixed in a later revision.
I have written a jQuery plugin for this exact purpose: https://github.com/mrmoses/jQuery.stayInWebApp
Include the plugin somehow , then run it like so:
$(function() {
$.stayInWebApp();
});
By default it will attach to all <a /> elements. You can pass a different selector to attach it to specific links. For example, $.stayInWebApp('a.stay'); will attach to all links that have class="stay"
Because its so small, I usually just copy the minified version into one of my other external javascript files to include it, rather than having to add another external js reference.
Also available on plugins.jquery.com
You can try something like this:
if ((navigator.userAgent.indexOf('iPad') != -1)) {
// for standalone (app) fulscreen mode
if (window.innerHeight == 748 || window.innerHeight == 1004) {
var a = document.getElementsByTagName("a");
for (var i = 0, len = a.length; i < len; i++) {
if (a[i].getAttribute("href");) {
a[i].onclick = function() {
window.location = this.getAttribute("href");
return false;
}
}
}
}
}