Steff am 24. April 2017 um 12:11 Uhr

2017-04-24T12:11:26Z

Steff: Die Seite wurde neu angelegt: „https://github.com/davatron5000/FitVids.js '''How To:''' Include jQuery 1.7+ and FitVids.js in your layout and target your videos container with fitVids().
2017-04-24T12:10:34Z

Die Seite wurde neu angelegt: „https://github.com/davatron5000/FitVids.js '''How To:''' Include jQuery 1.7+ and FitVids.js in your layout and target your videos container with fitVids(). <s…“

Neue Seite
https://github.com/davatron5000/FitVids.js

'''How To:''' Include jQuery 1.7+ and FitVids.js in your layout and target your videos container with fitVids().
<syntaxhighlight lang="javascript">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#thing-with-videos").fitVids();
});
</script>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
/!
FitVids 1.1
*
* Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
*
/
!function(t){"use strict";t.fn.fitVids=function(e){var i={customSelector:null,ignore:null};if(!document.getElementById("fit-vids-style")){var r=document.head||document.getElementsByTagName("head")[0],a=".fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}",d=document.createElement("div");d.innerHTML='<p>x</p><style id="fit-vids-style">'+a+"</style>",r.appendChild(d.childNodes[1])}return e&&t.extend(i,e),this.each(function(){var e=['iframe[src="player.vimeo.com"]','iframe[src="youtube.com"]','iframe[src="youtube-nocookie.com"]','iframe[src="kickstarter.com"][src="video.html"]',"object","embed"];i.customSelector&&e.push(i.customSelector);var r=".fitvidsignore";i.ignore&&(r=r+", "+i.ignore);var a=t(this).find(e.join(","));a=a.not("object object"),a=a.not(r),a.each(function(e){var i=t(this);if(!(i.parents(r).length>0||"embed"===this.tagName.toLowerCase()&&i.parent("object").length||i.parent(".fluid-width-video-wrapper").length)){i.css("height")||i.css("width")||!isNaN(i.attr("height"))&&!isNaN(i.attr("width"))||(i.attr("height",9),i.attr("width",16));var a="object"===this.tagName.toLowerCase()||i.attr("height")&&!isNaN(parseInt(i.attr("height"),10))?parseInt(i.attr("height"),10):i.height(),d=isNaN(parseInt(i.attr("width"),10))?i.width():parseInt(i.attr("width"),10),o=a/d;if(!i.attr("id")){var h="fitvid"+e;i.attr("id",h)}i.wrap('<div class="fluid-width-video-wrapper"></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*o+"%"),i.removeAttr("height").removeAttr("width")}})})}}(window.jQuery||window.Zepto);
</syntaxhighlight>

← Nächstältere Version		Version vom 24. April 2017, 12:11 Uhr
Zeile 24:		Zeile 24:
	!function(t){"use strict";t.fn.fitVids=function(e){var i={customSelector:null,ignore:null};if(!document.getElementById("fit-vids-style")){var r=document.head\|\|document.getElementsByTagName("head")[0],a=".fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}",d=document.createElement("div");d.innerHTML='<p>x</p><style id="fit-vids-style">'+a+"</style>",r.appendChild(d.childNodes[1])}return e&&t.extend(i,e),this.each(function(){var e=['iframe[src="player.vimeo.com"]','iframe[src="youtube.com"]','iframe[src="youtube-nocookie.com"]','iframe[src="kickstarter.com"][src="video.html"]',"object","embed"];i.customSelector&&e.push(i.customSelector);var r=".fitvidsignore";i.ignore&&(r=r+", "+i.ignore);var a=t(this).find(e.join(","));a=a.not("object object"),a=a.not(r),a.each(function(e){var i=t(this);if(!(i.parents(r).length>0\|\|"embed"===this.tagName.toLowerCase()&&i.parent("object").length\|\|i.parent(".fluid-width-video-wrapper").length)){i.css("height")\|\|i.css("width")\|\|!isNaN(i.attr("height"))&&!isNaN(i.attr("width"))\|\|(i.attr("height",9),i.attr("width",16));var a="object"===this.tagName.toLowerCase()\|\|i.attr("height")&&!isNaN(parseInt(i.attr("height"),10))?parseInt(i.attr("height"),10):i.height(),d=isNaN(parseInt(i.attr("width"),10))?i.width():parseInt(i.attr("width"),10),o=a/d;if(!i.attr("id")){var h="fitvid"+e;i.attr("id",h)}i.wrap('<div class="fluid-width-video-wrapper"></div>').parent(".fluid-width-video-wrapper").css("padding-top",100o+"%"),i.removeAttr("height").removeAttr("width")}})})}}(window.jQuery\|\|window.Zepto);		!function(t){"use strict";t.fn.fitVids=function(e){var i={customSelector:null,ignore:null};if(!document.getElementById("fit-vids-style")){var r=document.head\|\|document.getElementsByTagName("head")[0],a=".fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}",d=document.createElement("div");d.innerHTML='<p>x</p><style id="fit-vids-style">'+a+"</style>",r.appendChild(d.childNodes[1])}return e&&t.extend(i,e),this.each(function(){var e=['iframe[src="player.vimeo.com"]','iframe[src="youtube.com"]','iframe[src="youtube-nocookie.com"]','iframe[src="kickstarter.com"][src="video.html"]',"object","embed"];i.customSelector&&e.push(i.customSelector);var r=".fitvidsignore";i.ignore&&(r=r+", "+i.ignore);var a=t(this).find(e.join(","));a=a.not("object object"),a=a.not(r),a.each(function(e){var i=t(this);if(!(i.parents(r).length>0\|\|"embed"===this.tagName.toLowerCase()&&i.parent("object").length\|\|i.parent(".fluid-width-video-wrapper").length)){i.css("height")\|\|i.css("width")\|\|!isNaN(i.attr("height"))&&!isNaN(i.attr("width"))\|\|(i.attr("height",9),i.attr("width",16));var a="object"===this.tagName.toLowerCase()\|\|i.attr("height")&&!isNaN(parseInt(i.attr("height"),10))?parseInt(i.attr("height"),10):i.height(),d=isNaN(parseInt(i.attr("width"),10))?i.width():parseInt(i.attr("width"),10),o=a/d;if(!i.attr("id")){var h="fitvid"+e;i.attr("id",h)}i.wrap('<div class="fluid-width-video-wrapper"></div>').parent(".fluid-width-video-wrapper").css("padding-top",100o+"%"),i.removeAttr("height").removeAttr("width")}})})}}(window.jQuery\|\|window.Zepto);
	</syntaxhighlight>		</syntaxhighlight>
		+
		+
		+	Add Your Own Video Vendor
		+
		+	Have a custom video player? We now have a customSelector option where you can add your own specific video vendor selector (mileage may vary depending on vendor and fluidity of player):
		+
		+	$("#thing-with-videos").fitVids({ customSelector: "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"});
		+	// Selectors are comma separated, just like CSS
		+
		+	Note: This will be the quickest way to add your own custom vendor as well as test your player's compatibility with FitVids.
		+	Ignore With Class
		+
		+	Have a video you want FitVids to ignore? You can slap a class of fitvidsignore on your object or container and your video will be displayed as it is defined.
		+
		+	If you'd like to add a custom block to ignore FitVids, use the ignore option.
		+
		+	$("#thing-with-videos").fitVids({ ignore: '.mycooldiv, #myviiid'});
		+	// Selectors are comma separated, just like CSS
		+
		+	Target Videos embedded without classes or containers
		+
		+	Customers/clients will occasionally add a video to a general content area or article and this may be without a class or container that you're targetting. A solution to this is to target the parent of videos, using something like the below;
		+
		+	$('iframe[src*="youtube"]').parent().fitVids();
		+	// You can change the selector to suit potential video providers, or chain them if your customer is likely to use more than one provider
		+
		+	By targetting the iframe/embed parent you can then dynamically add in the fitVids special sauce on the fly without needing to know the container ahead of time.
		+	Known issues
		+
		+	Vimeo Autoplay API is not compatible with FitVids in IE11. You must manually wrap videos you want to autoplay.

FitVids jQuery Plugin - Versionsgeschichte

Steff am 24. April 2017 um 12:11 Uhr