What Does `playsinline` Mean in Web Video?
Strategy

What Does `playsinline` Mean in Web Video?


I got myself confused about this the other day, went around searching for an answer and came up empty on finding something clear. The answer actually is quite clear and I feel a little silly for not knowing it.

With it in place, like this:

<video src="https://css-tricks.com/..." controls playsinline></video>

Mobile browsers, will play the video right where it is instead of the default, which is to open it up fullscreen while it plays.

Here’s what it looks like without playsinline:

Here’s what it looks like with playsinline:

(If you’re like me, you tried to play that video from the play button on the video in the video, only to realize it’s not a real play button. 🤯)

(While we’re getting meta, I’m making sure those videos above have playsinline on them right here in this blog post.)

Note that the user still has the ability to go fullscreen with the video even in the playsinline scenario, so I’d say it’s probably a smart default choice. It’s not literally the default — you have to add it, but you know what I mean.

One of the places this shows up regularly is in the attribute soup that is required to make video be a GIF-replacement:

<video autoplay loop muted playsinline src="https://css-tricks.com/..."></video>

If you have all four of those attributes, the video will actually autoplay (and loop) on mobile browsers, just like a GIF would, only with far better performance. You can skip loop if you don’t want that, but all the other three are required if you want the autoplay attribute to work.

I also learned that the (only?) way to get a thumbnail to show up on mobile (at least for iOS) is to use a poster attribute. Even if you preload, you don’t see anything but blank white unless you have a poster.

Without a poster:

With a poster:

<video
  src="https://css-tricks.com/movie.mov"
  poster="thumbnail.jpg" 
  controls
></video>mo

If you can’t be troubled to deal with a poster, you might wanna toss a border or something on video elements to sort of visually block off that area. Otherwise, the floating play button is a little awkward.



Source link

Diagram of absolutely positioned flex item
Strategy

Flexbox and absolute positioning


Recently, I’ve been trying to build an open source video conferencing application specifically for online meetups. Just like every other developer on the planet, it seems. Video conferencing apps are the new chatbots. Maybe.

This was also a good reason for me to get to know OpenTok better, as I had previously not had a use-case to build for. I’ll probably write up the whole process into a lengthy multi-part tutorial style post thingy when I actually get it into a reasonable MVP shape.

But this mini-post is about Flexbox and absolute positioning, and a minor bug (at least I think it is so I filed one) in the Firefox DevTools.

What happens when you position: absolute a flex item?

I can’t have been the only person to have tried this, right? Although for me, this was the first time I actually used such a combination even though I had read about it when I was combing through the Flexbox specification.

Which is why I knew there was a section detailing it, 4.1. Absolutely-Positioned Flex Children. I did not memorise the specification, I just knew such a section existed, okay?

Let me lift out the key points that I find most pertinent:

…an absolutely-positioned child of a flex container does not participate in flex layout.

however:

The static position of an absolutely-positioned child of a flex container is determined such that the child is positioned as if it were the sole flex item in the flex container, assuming both the child and the flex container were fixed-size boxes of their used size.

which means that:

…if you set, for example, align-self: center; on an absolutely-positioned child of a flex container, auto offsets on the child will center it in the flex container’s cross axis.

Let’s break that down. The first part is fairly straight-forward. If you position a flex item absolutely, it no longer participates in the flex layout. This means any flex properties on the item become moot. You can remove them if you like.

The next part explains that the absolutely positioned item behaves like it is the sole flex item in the flex container. So distil your mental model down to:

Diagram of absolutely positioned flex item

The box alignment properties still apply to the flex item even if it is absolutely positioned, which means using align-self will have an effect. Details of how normal behaviour works in this case can be found in the relevant section of CSS Box Alignment Module Level 3.

Additional information I won’t go into: 8. Sizing and positioning details which details how absolutely positioned elements are sized. (Maybe this might be a blog post in future)

Firefox DevTools has a feature that informs you why certain CSS is inactive. It’s pretty cool and I lean on it for layout related properties when I build stuff. However, it says that the align-self property is not active because the absolutely-positioned item is not a flex item.

I don’t really agree with this though…
Firefox says the rule doesn't apply

But it does have an effect. And the browser itself is behaving as expected. So I guess this is a DevTools bug? I’m not sure, so I filed a bug and am hoping someone will triage it.

Browser works perfectly

TLDR on why I absoluted a flex item

For now, the way my application works, all video streams go into a single parent container. I want to have the ability to focus on a single stream and make that the large size display (common UI pattern in most video conferencing clients).

That happens when a .focused CSS class is added to the selected stream element container, but because all the streams are on the same level, this is a sort of hacky way to get that effect. We shall see if I can modify the mark-up but as of now, I don’t know how.

Anyway, the project I’m working on is on GitHub, if anyone is remotely interested.

Screenshot of SGTechOnline

It’s slow going and very WIP, and if you think it looks decent, that’s because I run away from my harder problems and work on layout instead. ¯_(ツ)_/¯



Source link

Post image
Strategy

Issue implementing checkbox hack with radio buttons : webdev


I am just trying to setup a basic 2 button toggle using radio buttons and styling their label. I believe this is called the “checkbox hack” because we hide the input.

Theres 2 buttons, one with the value “SELECTED” (initially selected) and the other, “ALL”. For some reason when I click on All it becomes checked but the Selected button doesn’t get unchecked.

Here is a little Gist I created with the relevant code: https://gist.github.com/ajess33/4cac3666e0a6311b3b6dd8f4f61d6875

I figured the issue was due to the inputs not being inside of a form, but after adding in the form it still didn’t work.

I would greatly appreciate any help on this!

Post image

Initial state with “Selected” button checked

Post image

What happens when I click All. The Selected button should no longer have the checked styles



Source link

Playing With Particles Using the Web Animations API
Strategy

Playing With Particles Using the Web Animations API


When it comes to motion and animations, there is probably nothing I love more than particles. This is why every time I explore new technologies I always end up creating demos with as many particles as I can.

In this post, we’ll make even more particle magic using the Web Animations API to create a firework effect when clicking on a button.

Browser support

At the time I’m writing this article, all major browsers — with the exception of Safari and Internet Explorer — at least partially support the Web Animations API. Safari support can be enabled in the “Experimental Features” developer menu.

Desktop

Chrome Firefox IE Edge Safari
83 76 No 80 TP

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
80 68 80 13.3

If you’re interested in reproducing the Twitter heart animation you could also have a look at this cool article by Ana Tudor which is another great example of exploding particles on a button.

HTML setup

We won’t need much HTML for this demo. We will use a <button> element but it could be another type of tag element. We could even listen to any click on the page to make particles pop from anywhere if we really wanted to.

<button id="button">Click on me</button>

CSS setup

Since every particle has a few CSS properties in common, we can set them in the global CSS of the page. As you can create custom tag elements in HTML, I will use a <particle> tag name to avoid using semantic tags. But truth is, you could animate <p>, <i> or any tag of your choice.

particle {
  border-radius: 50%;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
}

A couple thing to note here:

  • The particles should not interact with the layout of our page, so we’re setting a fixed position with top and left at 0px each.
  • We’re also removing pointer events to avoid any user interaction on the HTML particles while they are on the screen.

Because styling the button and the page layout is not really the purpose of this article I will leave that on the side.

JavaScript setup

Here are the six steps we will follow in our JavaScript:

  1. Listen to click event on the button
  2. Create 30 <particle> elements and append them into the <body>
  3. Set a random width, height and background for every particle
  4. Animate each particle from the mouse position to a random place as they fade out
  5. Remove the <particle> from the DOM when the animation is complete

Step 1: The click event

// We first check if the browser supports the Web Animations API
if (document.body.animate) {
  // If yes, we add a click listener on our button
  document.querySelector('#button').addEventListener('click', pop);
}

Step 2: The particles

// The pop() function is called on every click
function pop(e) { 
  // Loop to generate 30 particles at once
  for (let i = 0; i < 30; i++) {
    // We pass the mouse coordinates to the createParticle() function
    createParticle(e.clientX, e.clientY);
  }
}
function createParticle(x, y) {
  // Create a custom particle element
  const particle = document.createElement('particle');
  // Append the element into the body
  document.body.appendChild(particle);
}

Step 3: Particle width, height and background

function createParticle (x, y) {
  // [...]
  // Calculate a random size from 5px to 25px
  const size = Math.floor(Math.random() * 20 + 5);
  // Apply the size on each particle
  particle.style.width = `${size}px`;
  particle.style.height = `${size}px`;
  // Generate a random color in a blue/purple palette
  particle.style.background = `hsl(${Math.random() * 90 + 180}, 70%, 60%)`;
}

Step 4: Animate each particle

function createParticle (x, y) {
  // [...]
  // Generate a random x & y destination within a distance of 75px from the mouse
  const destinationX = x + (Math.random() - 0.5) * 2 * 75;
  const destinationY = y + (Math.random() - 0.5) * 2 * 75;

  // Store the animation in a variable because we will need it later
  const animation = particle.animate([
    {
      // Set the origin position of the particle
      // We offset the particle with half its size to center it around the mouse
      transform: `translate(${x - (size / 2)}px, ${y - (size / 2)}px)`,
      opacity: 1
    },
    {
      // We define the final coordinates as the second keyframe
      transform: `translate(${destinationX}px, ${destinationY}px)`,
      opacity: 0
    }
  ], {
    // Set a random duration from 500 to 1500ms
    duration: 500 + Math.random() * 1000,
    easing: 'cubic-bezier(0, .9, .57, 1)',
    // Delay every particle with a random value from 0ms to 200ms
    delay: Math.random() * 200
  });
}

Because we have a random delay, the particles waiting to start their animation are visible on the top-left of the screen. To prevent this, we can set a zero opacity on every particle in our global CSS.

particle {
  /* Same as before */
  opacity: 0;
}

Step 5: Remove particles after the animation completes

It is important to remove the particle elements from the DOM. Since we create 30 new elements on every click, the browser memory can fill up pretty quickly and cause things to get janky. Here’s how we can do that:

function createParticle (x, y) {
  // Same as before
  // When the animation is finished, remove the element from the DOM
  animation.onfinish = () => {
    particle.remove();
  };
}

Final result

Putting everything together gives us what we’re looking for: a colorful explosion of particle goodness.

Not seeing the animation in the demo? Check if your browser supports the Web Animations API. in the support table at the top of the post.

Be creative!

Because all this is using CSS, it’s pretty simple to modify the particle styles. Here are five examples using various shapes… and even characters!


Or hey, we can even explode the button itself like Zach Saucier did in this post.

A button with a gradient exploding into particles





Source link

Slider Layout for vuejs project
Strategy

Slider Layout for vuejs project


Slider Layout for vuejs project

I'm looking for a reference or code snippet for this slider layout in the VueJS project. Anybody give me a code snippet or reference? Thanks in Advance!

https://preview.redd.it/kd03koy96gn41.png?width=792&format=png&auto=webp&s=1fb0f5ba14285a23819f0fabb1034f5bb5b26767

submitted by /u/mominriyadh
[comments]



Source link