My goal was to play a mov-file that's already uploaded on my server and it'd be nice to have it pop up inframe using fancybox and jquery. However I have attempted with no luck substituting .mov to swf-type in these codes:
<a class="various" href="Poem.MOV">Play movie</a>
with this Jquery from the fancybox website's suggestion-list:
<script src="jquery.js"></script>
<script type="text/javascript" src="jquery.fancybox.js"></script>
<script>
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
This only sent me to a different webpage playing that mov-file. A different and closest code that ever worked by popping the video up in a fancybox inframe successfully BUT does not play or even show up at all. It only showed up in white frame without playing the film:
HTML:
<a class="fancybox" data-type="swf" href="Poem.MOV" title="Poem">Play Movie</a>
JAVASCRIPT:
<script>
jQuery(document).ready(function($){
$(".fancybox").on("click", function(){
$.fancybox({
href: this.href,
type: $(this).data("type")
}); // fancybox
return false
}); // on
}); // ready
</script>
I wonder if this is feasible to play .mov on our own server using fancybox without using third-party server such as YouTube or Vimeo. Thanks for your time.
You can use the JWplayer player with fancybox to play the .mov or other video formats.
below is the code to integrate jWplayer with fancybox:
$(".various").fancybox({
fitToView: true,
content: '<div id="myJWPlayer">Loading the player ...</div>',
scrolling: 'no',
afterShow: function () {
var video_href= j(this.element).data('url');
$('#myJWPlayer').css({height:'400px',width:'500px'});
setTimeout(function(){
jwplayer('myJWPlayer').setup({
'file' : video_href,
"autostart" : "true",
"controlbar" : "bottom",
"flashplayer" : "url-to-/jwplayer.flash.swf",
"volume" : "70",
"width" : 500,
"height" : 400,
"mute" : "false",
"stretching" : "fill"
});
updateViewTime(vid);
},100);
}
});
I had a problem where the HTML5 video player worked, but loading the same .mov into fancybox did not play. My solution was to either add the url of the video directly to the video tag, or to set the "type" attribute of the source tags as empty in the afterLoad() callback.
const attachment_movie = [ 'mp4', 'mov' ];
$.fancybox.open(gallery, {
buttons: [
'download',
'zoom',
'slideShow',
'thumbs',
'close'
],
thumbs: { 'autoStart': true },
afterLoad : function() {
var href = this.src;
var ext = href.substr(href.lastIndexOf('.') + 1).toLowerCase();
if ( $.inArray(ext, attachment_movie) > -1 )
$('.fancybox-video').prop('src', href);
// or
if ( $.inArray(ext, attachment_movie) > -1 )
$('.fancybox-video source').prop('type', '');
}
});
I managed to workaround the problem by replacing template for <video> tag. I added src="{{src}}" to the video tag. You can also pass that as a part of options.
$.fancybox.defaults.video = {
...$.fancybox.defaults.video,
tpl: `
<video class="fancybox-video" poster="{{poster}}" src="{{src}}">
<source src="{{src}}" type="{{format}}" />Sorry, your browser doesn't support embedded videos,
download and watch with your favorite video player!
</video>`
};
Related
On this link the FancyBox shows the video but with black bars to the side. Also when I resize the browser black bars appear on the top. I tried everything I could find on SO and elsewhere but I can't seem to find the solution.
This is my JS setup of the FancyBox:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
},
autoSize: false,
fitToView: true,
maxWidth: 960,
maxHeigth: 540,
height: '70%',
width: '70%',
});
});
</script>
Where do I need to look to fix this?
I found if you update the width of div which class is flideo , that would fix this problem
you coulde see the picture url below
https://dl.dropboxusercontent.com/u/23971112/stackoverflow/fancybox%20black%20bar.JPG
I have a simple app with a Google Map and markers.
Clicking on the markers i have to show either an image, a slideshow or a video.
This is the javascript needed to display an image (properly working):
google.maps.event.addListener(marker1, 'click', function() {
$.fancybox({
href: 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Tootsi_jaamahoone.jpg/800px-Tootsi_jaamahoone.jpg'
// other options
});
});
This is instead the attempt i have made to display a video:
google.maps.event.addListener(marker3, 'click', function() {
$.fancybox({
'type' : 'iframe',
// hide the related video suggestions and autoplay the video
'href' : 'http://www.youtube.com/watch?v=Q_W1apjU4Go',
'overlayShow' : true,
'centerOnScroll' : true,
'speedIn' : 100,
'speedOut' : 50,
'width' : 640,
'height' : 480
});
});
Here i have recreate the situation with a Google Map with 3 markers, for one of them is possible to see an image, for the other a slideshow, for the third a video.
The image and the slideshow are working properly, but instead of the video i am seeing a blank box:
http://jsbin.com/ANuyojoW/13/edit
Someone perhaps knows how can i properly display a video?
Thank you very much!
Use following js:
Demo
// Video - Not working
google.maps.event.addListener(marker3, 'click', function() {
$.fancybox({
'type' : 'iframe',
// hide the related video suggestions and autoplay the video
'href' : 'http://www.youtube.com/watch?v=Q_W1apjU4Go'.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'overlayShow' : true,
'centerOnScroll' : true,
'speedIn' : 100,
'speedOut' : 50,
'width' : 640,
'height' : 480
});
});
I'm trying to open up a sexy fancybox dialog with the Twitter tweet button stuff iframe style.
(function () {
// Fancybox Options for IFrame
var fancybox_params = {
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'width': 680,
'height': 400,
'type': 'iframe'
};
// Twitter
var twitter_params = fancybox_params;
twitter_params.title = 'Twitter';
twitter_params.href = 'twitter.com/share?' +
'url=https%3A%2F%2Fdev.twitter.com%2Fpages%2Ftweet-button';
$('#social_twitter').fancybox(twitter_params);
});
And then a little...
<a id="social_twitter" href="javascript:void(0)">Twa-twa-twa-tweet me homes</a>
I just get a loading animation. Working with fancybox 2.0.6.
You should put "http://" at the start of external URL.
But the actual problem is I think,
"twitter doesn't allow itself to be embedded via iframe."
from #andrew_ohlmann answer
So that means you are not able to do it.
I am encountering an issue that .mp4 video file can not be loaded in the flowplayer within the fancybox plugin.
Chrome and IE: the loading images keep making circle but a message shows that the mp4 video file
Firefox: white blank box
my site is: http://www.globalbest.com.hk/magazine.html
I want to open the video clips on the top of the first "watch video link" in the fancybox flowplayer
<script>
$("a[class=video]").click(function() {
ar vf = $(this).attr("href");
$.fancybox('',{
'overlayShow' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'over',
'type' : 'swf',
'autoDimensions':false,
'centerOnScroll': true,
'width' : 800,
'height':600,
'onComplete' : function() {
$("#fancybox-content").html('').flowplayer("flowplayer/flowplayer-3.2.7.swf", {clip:{url:vf}});
}
});
return false;
});
</script>
<a class="video" href="videos/iBone.HKSTAR.mp4" title="example title text">Watch Video</a>
I have an issue with the html5 video controls capturing any actions happening on top of them in iOS, which is interfering with a modal window I need to display on top of the video.
I'm trying to customise the modal itself, but can't seem to get it to work. Basically, when the modal opens, I need to do:
var video = document.getElementById("videocontainer");
video.removeAttribute("controls");
And when the modal closes, I need to add the controls back again:
var video = document.getElementById("videocontainer");
video.setAttribute("controls","controls");
But I can't seem to get it to work. Here's the code for the relevant part of the modal window:
//Entrance Animations
function openModal() {
modalBG.unbind('click.modalEvent');
$('.' + options.dismissmodalclass).unbind('click.modalEvent');
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"top": $(document).scrollTop()+topMeasure,
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "fade") {
modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "none") {
modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
modalBG.css({"display":"block"});
unlockModal()
}
}
}
//Closing Animation
function closeModal() {
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"top": $(document).scrollTop()-topOffset,
"opacity" : 0
}, options.animationspeed/2, function() {
modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
unlockModal();
});
}
if(options.animation == "fade") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"opacity" : 0
}, options.animationspeed, function() {
modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
unlockModal();
});
}
if(options.animation == "none") {
modal.css({'visibility' : 'hidden', 'top' : topMeasure});
modalBG.css({'display' : 'none'});
}
}
}
The issue is that the placeholder for the VIDEO tag on a webpage viewed on an iPhone or iPod Touch greedily captures all events even from elements that are on a higher "layer". This doesn't happen on the iPad or in a desktop environment.
On the iPhone and iPod Touch the VIDEO tag is effectively just a link to open the device's native QuickTime app to play the video asset. There is no concept of "controls" within the browser on these devices so adding or removing them won't do anything.
I've had to deal with this very problem at my current company which specializes in online video. The "hacky" way we got around this in the HTML5 version of our player widget was to absolutely position the VIDEO tag with a left style of -2000px (you can choose any suitably large number of pixels that you know your VIDEO tag will never match in width) when the widget detects that the user is using an iPhone or iPod Touch.
Since the VIDEO tag itself has nothing to do with how the user will view the video asset and we use a "poster" image inline with where the VIDEO tag normally shows up the user is none the wiser about where the VIDEO tag actually is (and wouldn't really care, anyway).