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).
Related
I am trying to integrate this code : http://codepen.io/babybackart/pen/GZPjJd on a section of a website using fullpage.js.
This code is based on a previous question brilliantly answered by #Seika85 : Make a .div act like an image.
The aim was to "contain" and resize the image on its container ".plancheBox" without cuting it.
In this example, the cat picture's dimensions are driven by the container using this first javascript code:
var calculateImageDimension = function() {
$('.plancheBox img').each(function() {
var $img = $(this),
$plancheBox = $img.closest('.plancheBox');
$img.css({
'max-height': $plancheBox.height() + 2,
/* (+2px) prevent thin margins due to rendering */
'max-width': $plancheBox.width()
});
$img.closest('.container').css({
'position': 'relative'
});
});
}
calculateImageDimension();
In order to set these dimensions instantaneously (without a page refresh), I am using this second javascript code:
var resizeEnd;
$(window).on('resize', function() {
clearTimeout(resizeEnd);
resizeEnd = setTimeout(function() {
$(window).trigger('resize-end');
}, 200);
});
$(window).on('resize-end', function() {
$('.plancheBox img').css({
'max-height': 'none',
'max-width': 'none'
})
$('.plancheBox .container').css({
'position': ''
});
calculateImageDimension();
});
As you can see in the first example, it works without fullpage.js.
I managed to insert the first JS code in a fullpage.js website : http://codepen.io/babybackart/pen/ONrbEN but I don't really manage to insert the second one.
I'm not actually a JS coder so I wanted to know what I needed to do to insert this code, if it was possible to do this with fullpage.js and if there were any conflict between both codes.
Thank you for your answer !
The second JS code must be inserted in a fullPage event like this:
$(document).ready(function() {
$('#fullpage').fullpage({
//events
afterResize: function(){
$('.plancheBox img').css({
'max-height' : 'none',
'max-width' : 'none'
})
$('.plancheBox .conteneur').css({'position' : ''});
calculateImageDimension();
}
});
});
I've modified a template that had Fancybox already installed and functioning; I'm having problems with my gallery windows being too big on smaller screens. Currently I have a large image and then a decent block of text below. After modifying the code in the 'main.js' file, I can get the window to fit inside a browser window on a non-Retina Macbook Pro and larger screens, but on a Macbook Air 11" the window gets cut off on the bottom (I know it's about pixels and not screen size, I just don't have the numbers on hand). It's not an issue on a phone because I can scroll the window up with a finger.
One solution would be to enable scrolling inside the windows, but if that is possible then I haven't been able to make it work. Maybe they should be iframes and not gallery windows? If so I would need advice on how to implement that (the template did not come with any iframe examples beyond links to videos).
Here's the site: Weirdsmobile
Click on any of the tiles in the "Projects" section to see a Fancybox window.
Here is all the javascript code; I got advice to add the fitToView: false and maxWidth: "95%" because the window initially did not fit on a phone screen. I then added
maxHeight: "60%" to try and shrink it to fit, otherwise the full window is too large; but on smaller screens that % is still too high.
BRUSHED.fancyBox = function(){
if($('.fancybox').length > 0 || $('.fancybox-media').length > 0 || $('.fancybox-various').length > 0){
$(".fancybox").fancybox({
fitToView: false, // so we can get all the length of the title
maxWidth: "95%", // will make it responsive; adjust to your needs
maxHeight: "60%",
padding : 0,
beforeShow: function () {
this.title = $(this.element).attr('title');
this.title = '<h4>' + this.title + '</h4>' + '<p>' + $(this.element).parent().find('img').attr('alt') + '</p>';
},
helpers : {
title : { type: 'inside' },
}
});
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
}
}
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>`
};
I had used Youtube Popup player for video player in my webapplication, iam trying to change the styles of popup window..but iam not able to do it..i had found cssClass property for applying styles.. here is the link for youtube popup player..http://lab.abhinayrathore.com/jquery_youtube/
How can i resolve it..
You can follow Arunkumar answer if you want to change the defaults of the plugin, so that you don't have to set the options everytime you want to initialize the plugin.
Or, you can set specific properties to each element with the plugin assigned, like this:
$(function () {
var options = {
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};
$("a.youtube").YouTubePopup(options);
});
DEMO
Or, instead of creating a variable options, you could just do something like this:
$(function () {
$("a.youtube").YouTubePopup({
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};);
});
Hope I could make it more understandable to you!
customize Popup using script
like
$(function () {
$.fn.YouTubePopup.defaults.fullscreen = 0;
$.fn.YouTubePopup.defaults.color1 = 'CCCCCC';
$.fn.YouTubePopup.defaults.width='500';
$.fn.YouTubePopup.defaults.height='300';
$.fn.YouTubePopup.defaults.overlayOpacity='0.5';
});
You can able to change popup defaults above way.
Hope it helps:);
Can someone please look at this page and figure our why it isn't looking right in Internet Explorer? It looks fine in Chrome and Firefox but in IE the layout of the photos gets messed up specifically the two photos on the right hand side of the page.
http://waldrondigitaldesigns.com/gallery.html
I am assuming it something with this script but I am no javascript or jquery expert and barely a novice
// wrap as a jQuery plugin and pass jQuery in to our anoymous function
(function ($) {
$.fn.cross = function (options) {
return this.each(function (i) {
// cache the copy of jQuery(this) - the start image
var $$ = $(this);
// get the target from the backgroundImage + regexp
var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
// nice long chain: wrap img element in span
$$.wrap('<span style="position: relative;"></span>')
// change selector to parent - i.e. newly created span
.parent()
// prepend a new image inside the span
.prepend('<img>')
// change the selector to the newly created image
.find(':first-child')
// set the image to the target
.attr('src', target);
// the CSS styling of the start image needs to be handled
// differently for different browsers
if ($.browser.msie || $.browser.mozilla) {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : this.offsetTop
});
} else if ($.browser.opera && $.browser.version < 9.5) {
// Browser sniffing is bad - however opera < 9.5 has a render bug
// so this is required to get around it we can't apply the 'top' : 0
// separately because Mozilla strips the style set originally somehow...
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : "0"
});
} else { // Safari
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : ''
});
}
// similar effect as single image technique, except using .animate
// which will handle the fading up from the right opacity for us
$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 450);
}, function () {
$$.stop().animate({
opacity: 1
}, 1000);
});
});
};
})(jQuery);
// note that this uses the .bind('load') on the window object, rather than $(document).ready()
// because .ready() fires before the images have loaded, but we need to fire *after* because
// our code relies on the dimensions of the images already in place.
$(window).bind('load', function () {
$('img.fade').cross();
});
must be the usual bug with positioning in IE. I would recommend reading the first answer from IE7 relative/absolute positioning bug with dynamically modified page content and see if that helps solve your problem.
try change your code to below, it should fix the photos on your right hand side. =)
// the CSS styling of the start image needs to be handled
// differently for different browsers
if ($.browser.msie || $.browser.mozilla) {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : ''
});