Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Breaking the HTML5 Video Aspect Ratio
# Just an example.
# @video is a direct reference to a '<video>' element.
# $() is assuming jQuery is being used in this example.
@video.addEventListener("loadedmetadata", (event) =>
actualRatio = @video.videoWidth/@video.videoHeight
targetRatio = $(@video).width()/$(@video).height()
adjustmentRatio = targetRatio/actualRatio
$(@video).css("-webkit-transform","scaleX(#{adjustmentRatio})")
)
@MikeBiggerstaff
Copy link

MikeBiggerstaff commented Mar 14, 2013

Dude you are awesome saved me a bunch of time.

@ezmiller
Copy link

ezmiller commented Mar 12, 2014

What do you mean by "direct reference"? I'd assumed that I'd just need to replace @video with whatever I'd use to reference the element, say $('.videoelem'), in my project. But what through me off is the difference between @video.videoWidth and $(@video).width() in your code. What is the difference betweeen @video and $(@video)?

@cshanejennings
Copy link

cshanejennings commented Apr 8, 2014

I assume he means $('.videoelem').get(0) if you are using jQuery because he's referring to the dom element itself, not the jQuery object. or...

$('.videoelem').get(0).addEventListener... to put it in context

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment