toddmotto / fluidvids Goto Github PK
View Code? Open in Web Editor NEWFluid width (responsive) videos module, 1KB, custom players, dynamic elements/XHR support.
Home Page: http://toddmotto.com/labs/fluidvids
License: Other
Fluid width (responsive) videos module, 1KB, custom players, dynamic elements/XHR support.
Home Page: http://toddmotto.com/labs/fluidvids
License: Other
The script won't work with dynamic content as the closure does not return anything.
eg. window.fluidvids === null // true
The closure function should return Fluidvids.
After installing with npm as stated in the REAME, requiring the package with
var fluidvids = require('fluidvids')();
fails because npm
installs the package under node_modules/fluidvids.js
just because that's the name of the module in package.json
.
https://github.com/toddmotto/fluidvids/blob/master/package.json#L2
This is my workaround:
var fluidvids = require('fluidvids.js/dist/fluidvids')();
I think simply changing the package name in package.json
to fluidvids
should fix it and be no harm since the package isn't published to npm.
By the way.
๐ +1 for using the repo hook for bower
.
๐ -1 for not publishing to npm
.
When initializing the script, it would be nice to use it for both objects and iframes (for example, I run a blog that embeds a lot of iframes, but occasionally embeds an video from older media sites (like ABC).
There doesn't seem to be a way to do this currently, so I suppose this is a feature request.
Hello,
Thanks for your awesome script but there has an one issue here. Any chance to exclude some div and disabling this script specific area?
Thanks again.
Please could you tag version 2.2.0?
view-source:https://www.barisdayak.com
fluidvids.min.js web site source code index problems.
help please.
thanks
Hi,
fluidvids is installed as a bower plugin. And gives me errors on initialisation at least with the last two current versions (s. below). v2.2.2 works fine for me.
Console output:
Installed v2.3.0 => Uncaught TypeError: exports.selector.join is not a function
Installed v2.4.1 => Uncaught TypeError: fluidvids.selector.join is not a function
Can anyone confirm this?
Hi again,
it would be nice, if the bower.json would contain a "main" directive (e.g. "main": "dist/fluidvids.js") like the package.json. Makes it easier to fit in common workflows (for example when using such plugins like main-bower-files etc.).
Anyway, thanks for the brilliant script.
Hi, I'm using the following jQuery click function to swap in a YouTube video for an image using the data-video
attribute:
$('img.play-video').click(function(){
video = '<iframe width=560 height=315 frameborder="0" allowfullscreen src="'+ $(this).attr('data-video') +'"></iframe>';
$(this).replaceWith(video);
});
I'm wondering if I can apply fluidvids to a video inserted in this way, perhaps by using fluidvids.render()
, and if so, how I would go about implementing it? Is this something I'd reference in the click function itself? Thanks for any assistance here.
can fluidvids embed an autoplaying vimeo video with less data transfer than the default vimeo embed ?
Hello!
I have issues with height of video.
<div class="fluidvids" style="padding-top: 300%;">
padding is huge.
Can you give me advice. How I can fix this issue ?
Thank you!
Provisional headers are shown from player.vimeo.com
Steps to reproduce
go to tutorial
Why does the library add <style>
to head ?
You can add a SASS file for example (_fludvids.scss) to the src folder for people to add it to their styles file. Or you can post necessary styles in readme for people to copy/paste them.
Finally, you can post an option for disabling the styles adding to the head.
Please, do smth from that, it is insane to see <style>...</style>
in <head>
in 2015. Thanks
When using FluidVids to embed any external source, the URL is first populated in the standard way, but then a subsequent call is made to the same URL. A standard Fiddler trace reveals the problem.
For an API call that is dependent on trusted ticket authentication (ie, one-ticket session key), the second call to the URL is invalid.
FWIW, I've been testing this with Tableau Server trusted ticket authentication.
I have been trying to solve this for a while with a wordpress theme that uses fluidvids. The full screen display of the video makes the video so large in height the controls are off the page. Is there anyway to change the width of the video to match the aspect ratio of the video and keep the controls on-screen?
Love this script btw!
But I'm trying to extend it a bit to make it work with instagram images too. The default instagram embed code does away with having http or https before the url. Would it be possible to modify the regex that you have in place for the players to check for http, https or just ://(instagram.com)?
Hi Todd,
I'm seeing this console error since updating to the latest version of Fluid Vids. Any idea what's causing it?
Blocked a frame with origin "http://www.youtube.com" from accessing a frame with origin "http://gomakethings.com". Protocols, domains, and ports must match.
I was just testing it out and it did not work for me at first. The reason was that I add the js to the header. I know it is not best practice but I was just testing the code.
Just easier to bower i --save fluidvids
than have to look up the repo each time.
I came across your script messing with my already responsive videos. (Actual issue is not on that page). I now have to run JavaScript to remove classes and attributes is sets I guess. I saw this issue #9 but its not helping because I have no control oder the initialization process. Its other peoples WordPress sites and themes/plugins using this script.
I only have control oder HTML output with my plugin so I think you should do something fitfids does, enable users to simply ignore elements by adding .fluid-vids-ignore
. I will have to do my manual removal anyway since I cant rely on themes being updated, so I am just suggesting this to help make this project better.
Hi Todd,
Thanks for the great script! It's nice to have a vanilla js solution. I came across an issue when implementing Fluidvids on a site with many 1280x720 YouTube embeds. While the width is fluid, the height is not adjusted proportionately. I made a pen to demonstrate.
@jaydenseric Made a pull request for this but it was somehow overwritten so it is not there anymore. I also saw that you made some changes. I recreated it. This is what I got and it works. I also added the YouTube privacy version of the url.
(function ( window, document, undefined ) {
/*
* Grab all iframes on the page or return
*/
var iframes = document.getElementsByTagName( 'iframe' );
/*
* Loop through the iframes array
*/
for ( var i = 0; i < iframes.length; i++ ) {
var iframe = iframes[i],
/*
* RegExp, extend this if you need more players
*/
players = /www.youtube.com|www.youtube-nocookie.com|player.vimeo.com/;
/*
* If the RegExp pattern exists within the current iframe
*/
if ( iframe.src.search( players ) > 0 ) {
/*
* Calculate the video ratio based on the iframe's w/h dimensions
*/
var width = iframe.width;
var height = iframe.height;
var videoRatio = ( height / width ) * 100;
/*
* Replace the iframe's dimensions and position
* the iframe absolute, this is the trick to emulate
* the video ratio
*/
iframe.style.position = 'absolute';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.width = '100%';
iframe.height = '100%';
/*
* Wrap the iframe in a new <div> which uses a
* dynamically fetched padding-top property based
* on the video's w/h dimensions
*/
var wrap = document.createElement( 'div' );
wrap.className = 'video-wrap';
wrap.style.width = '100%';
wrap.style.position = 'relative';
wrap.style.paddingTop = videoRatio + '%';
/*
* Add the iframe inside our newly created <div>
*/
var iframeParent = iframe.parentNode;
iframeParent.insertBefore( wrap, iframe );
wrap.appendChild( iframe );
/*
* Wrap the div in a new <div> which is used
* to set a max width accordin to the video's dimensions
*/
var outerWrap = document.createElement( 'div' );
outerWrap.className = 'outer-video-wrap';
outerWrap.style.maxWidth = width + 'px';
/*
* Add the div wrap inside our newly created <div>
*/
var wrapParent = wrap.parentNode;
wrapParent.insertBefore( outerWrap, wrap );
outerWrap.appendChild( wrap );
}
}
})( window, document );
Fluidvids.js doesnt work because it is not controling window.load state:
window.onload = function() {
var iframes = document.getElementsByTagName('iframe');
// other stuff..
}
This will work.
Or users have to put it before closing body element.
Here you can see an issue that very similar:
http://stackoverflow.com/questions/7549290/dom-getelementsbytagname-problem
Hi Todd,
I am unable to play YouTube embeds on iOS. I am able to play them just fine on my desktop. If you have an iPhone or iPad, checkout this post for an example. I'm not seeing any errors in the console...
Hi Todd
Thanks for your work, one problem i have is using an iframe embedded from google docs by publishing a pie chart. It works fine in my responsive template, except on mobile phone (IOS).
Should your script work in this situation or is for video feeds only?
Seems to require a width and height to work properly. Is there anyway to make this not the case?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.