▼
Streaming live at 10am (PST)

Making autoplaying EMBEDs on desktop switch to standard play on mobile

#1

Hi Webflow -
Using video embeds in multiple places on my site. Works great on Desktop.
Being a big dummy, I didn't realize this wouldn't work in mobile.

On desktop, see video inside iMac screen on this page:
http://scottbarbey.com/city-barbecue

but on iPad... embed is just a frozen image. Ugh.

So I guess I have to have 2 embeds.
one for desktop with custom code to auto-play, like this:

<iframe src="https://player.vimeo.com/video/185420819?background=1" title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/185420819">cbbq website scroll</a> from <a href="https://vimeo.com/user6825633">scott barbey</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

and one like this on tablet/phone like this:

<iframe src="https://player.vimeo.com/video/185420819? title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/185420819">cbbq website scroll</a> from <a href="https://vimeo.com/user6825633">scott barbey</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

BUT - How? Do I need to create a second DIV holder/embed unit with the "B" version on desktop and make it invisible - and then swap invisibles on lower mobile breaks? UGH! :frowning:

Is there any way to do this easier?

thanks as always.
Scott B.

Here is my public share link:
https://preview.webflow.com/preview/scottbarbey70956011502405-c113dc3db0ebd?preview=8b7171529f6bc404f61f3dd47299c65c

#2

Actually it now works fine on iOS—you can use the same code in all instances. You might want to upload your video on a separate page using Webflow (instead of Vimeo). This will create MP4 and WEBM files and host them automatically.

Sample (try this page on iOS):
http://playsinline.webflow.io

Project:
https://preview.webflow.com/preview/playsinline?preview=d7203661bd3a954f957f464a6b46c623

<video 
autoplay="autoplay"
playsinline
loop="loop"
style="width:100%"
"background-image: url(https://daks2k3a4ib2z.cloudfront.net/55de95401f19df505cc6c89d/56e21cb0d4252379507a44a1_dynamo-video-poster-00001.png)">
<source src="https://daks2k3a4ib2z.cloudfront.net/55de95401f19df505cc6c89d/56e21cb0d4252379507a44a1_dynamo-video-transcode.webm">
<source src="https://daks2k3a4ib2z.cloudfront.net/55de95401f19df505cc6c89d/56e21cb0d4252379507a44a1_dynamo-video-transcode.mp4">
</video>
#3

Hi Mr. McGuire -
Super happy to learn IOS now support pre-playing video on load. Awesome news.
Also - really appreciate the help.

But - not 100% clear yet...
are you suggesting instead of an embed -- I bring in a video using the VIDEO element?
than applying the above code to the video?

If so, am I applying the whole code and just replacing the URL part?
Where do I get the new URL part? Don't I only add URL code for an embed?

While I can try this - ALL my videos are already on VIMEO. soooo wish that would work. would be a lot easier.

Any more info would be appreciated.

#4

The code above requires a direct link to a video file. I know Vimeo PRO supports this, though you'd have to research what levels of their service support this feature. :+1:

To do it in Webflow, create a separate page, create a background video element, upload your video, and publish the site (.webflow.io works fine). Visit that page on the published site, right click the video, and inspect. You should be able to drill down in the code to the specific URLs above (WEBM, MP4, and the background image/poster). :slight_smile:

#5

Took a bit of head-scratching, but I think I get it now.
One last question... about "WEBM" --
From what I understand, they are akin to GIFs - a series of still images
that play in order.

Some of the movies I want to play at load are longer than others. Any
concerns on length relative to functional "playing"?
Longest video may be 1.5 minutes. will the converted WEBM work at this
length?
(Note: all of these are to be used "small" on screen. NOT as full screen
video.)

thanks.
SB

#6

I recommend some more research on WEBM—here's a great thread on reddit where users in the comments section go into detail about the two formats: https://www.reddit.com/r/explainlikeimfive/comments/3gcd2n/eli5_what_are_the_pros_and_cons_of_mp4_webm_and/

#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.