Big GIF, short movie

[BigBrother-84]

Hi Gentlemen!

Just for fun...


Since we cannot post movies to the Forum, I was wondering what size of GIF is possible.
The allowed file limit is 1 Mb.

This is the Shafer Pass (from Big Brother's Big Tour). Top and Bottom.
5 seconds, 256 colours, 10fps, 240x135.  Just under 1 Mb each.

This test gives an idea about the GIF limits.  Cranking any of these settings exceeds the 1 Mb maximum.  And no possible sound.

Linking a YouTube movie is more convenient!

[Gary Lewis]

That's cool, Jeff. But who says we can't post movies?

[BigBrother-84]

Gary Lewis wrote

That's cool, Jeff.  But who says we can't post movies?

Wow Gary, I have to apologize.  You're right, nobody said that we cannot do it, I simply supposed it since I didn't find any way to do so.


But nobody said that it can be done neither.


You'll have to explain me how to link a YouTube movie...  I search and don't find any way.
What are these strange codes "p" "p" and "i/frame"?  Have to enter them manually?


Be aware that the result may be impressive on a computer, it is terrible on a phone (vertical or horizontal), good on an horizontal pad but so-so on a vertical pad.
And I have the bad idea to enter the Forum mainly by the phone door...

Phone result (completely cropped):

Gary Lewis wrote

That's cool, Jeff.  But who says we can't post movies?
<p></p>
<iframe width="1120" height="630" src="https://www.youtube.com/embed/c1DdWQfwork?si=78py4-bRyGvkAnI8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

[Gary Lewis]

Here's how to do it:

1. Go to the video and click the Share button.
2. Then click the Embed button
3. Copy the code that starts with "<iframe" and ends with "/iframe>"
4. Above the post box tick the "Message is in HTML Format box"
5. Paste the embed code into the post box

But since you are in the HTML format you don't get carriage returns, so if you want spaces between paragraphs you'll need to click the Formatting box and then the Line Feed box.

And I doubled the embed code's width and height numbers, which may be causing part of the problem when entering via the Mobile door. So I didn't change the #'s on this one and let's see how it works.

[BigBrother-84]

Gary Lewis wrote

But since you are in the HTML format you don't get carriage returns, so if you want spaces between paragraphs you'll need to click the Formatting box and then the Line Feed box.

OK, so these are the mysterious "p" "p" codes, it's for the carriage return. Thanks for the tip! And thanks so much for this user guide!

(It makes me realize that younger people will probably be questioning about what is a «carriage» and why we should «return» it).

«My-First-Posted-Video»:

Oh yeah!!! So NIIIIIICE!

Gary, about the mobile issue: I have to say that I prefer the smallest as possible device is my pocket (presently iPhone 13 Mini). I suppose that the problem isn't the same on a larger phone...

Even with the smaller movie, it is still cropped on my mini phone (vertical and horizontal, although less in horizontal position):

Too bad for the small phones! It is still possible to see the original movie directly on YouTube.

[Gary Lewis]

Yep, that's where those codes come from.

And yes, you can always go directly to Youtube to see the video if it is cropped on your screen. But there must be a way to put special coding into the HTML to utilize the size of the screen on which it is being displayed. That should solve that problem, so I'll see if I can figure out how to do that.

In the interim I'll reduce the size by about 70% to see if it works on your phone.

[BigBrother-84]

Gary Lewis wrote

In the interim I'll reduce the size by about 70% to see if it works on your phone.

This size is ok for horizontal, but still cropped in vertical phone orientation:

Gary Lewis wrote

But there must be a way to put special coding into the HTML to utilize the size of the screen on which it is being displayed.  That should solve that problem, so I'll see if I can figure out how to do that.

I found this guide.

The guy concludes this way:
«Making a video follow its aspect ratio at all screen sizes is confusing, but luckily the code to do so is short and easy to extend.»

Hopefully, Gary, you’ll see the easy side of this "Wrapping the iFrame in a container" demonstration better than me…


This guy too discuss about resizing an iFrame.

The final html code should look like this example:

[Gary Lewis]

Thanks.  I'll go read those articles, but it may not be until tomorrow.

It would be nice if there is code that will determine the screen size from the user's device and then set the proper parameters.  But even if we find it we'll have to explain how to use it and it'll be something that everyone that posts a video will have to add to the HTML code.  

[Gary Lewis]

Had a bit to play with it. I think I did it the way the 2nd one said, so let's see if this works. Please check it out, as I will, on mobile devices.

[Gary Lewis]

Works on my iPhone 14 Pro Max!  Both in landscape awa portrait mode. And it works on my Windows laptop!

If it works as well on your Mini then I’ll have to figure out how to package it.

[Gary Lewis]

Works on my wife's iPad Pro.  

[Gary Lewis]

Let me document what I did.

The HTML code I used was:

<div style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/Mx6wf2KmRZU?si=M6YN1eXOZXckR1uy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="position:absolute; top:0; left: 0"></iframe>
</div>

But the Youtube embed code was:

<iframe width="560" height="315" src="https://www.youtube.com/embed/Mx6wf2KmRZU?si=UiuezRvBnv628L8z" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

So what I did was to add:

This before the embed code: <div style="padding-bottom:56.25%; position:relative; display:block; width: 100%">

Changed: width & height to "100%" and added style="position:absolute; top:0; left: 0"> at the end of the embed code

Put this after the embed code: </div>

[BigBrother-84]

Hurray! Works on iPhone 13 Mini too!






You’re the king Gary!

[Gary Lewis]

Jeff - Glad it worked on your Mini!  But I'm going to tag Jim/Ardwrkntrk to see if it works on his Android as so far we have Windows and Apple devices tested.

Jim - Does the video in this post work well on your device?  In both landscape as well as portrait?  If so we have a breakthrough, although not easily done.

[ArdWrknTrk]

It plays just fine but I can't get it to go full screen, and the hamburger menu and Bullnose truck logo drop down from the top.
Which isn't so bad in portrait but kills 1/3 of my screen in landscape.
Which means there's no possibility of seeing the whole of the imbedded video when sideways.

[Gary Lewis]

Thanks, Jim. But I don’t understand why it won’t go full screen. It does on my iPhone.

Jeff - Do you have the problems Jim is having?

[ArdWrknTrk]

Not sure.
When I touch the little expand (bracket) icon in the lower right the icon responds like normal, but nothing happens with the size of the imbedded video.  

[BigBrother-84]

Gary Lewis wrote

Jeff - Do you have the problems Jim is having?

On my side, I can hide the top menu if I swap the whole screen to the top. Works in Portrait and landscape modes.

I noticed that the full screen "square button" is not available in portrait mode. But once the full screen mode is enable, it stays on if I flip the phone from landscape to portrait mode.

[ArdWrknTrk]

The "full screen" button appears for me in both portrait and landscape but it doesn't 'bounce' when tapped in portrait orientation.

Regardless, nothing happens when I click in landscape either.

[Gary Lewis]

Interesting.  My iPhone 14 Pro Max responds much the same as Jeff's 13 Mini, except that I have the full screen button in portrait as soon as the video starts playing, and it works properly.

Apparently the Androids, or at least Jim's as there may be differences between them, doesn't respond the same way to the HTML code.  Steve/FoxFord33 carries an Android and is to be over tomorrow to install all LED lighting in the shop - assuming the bulbs come in today.  If so I'll have him check the video out on his and then report back.

Jim - Please go back to the Shafer Trail video here and see how it performs.  Then try the same video here, and check it out.  In the first one I doubled the fixed height and width figures that Youtube gives, and in the 2nd I just used their figures.

I'm going to guess that you'll like the new way better than either of those ways as the new way is somewhat flexible to the size of your screen and the old ways aren't.  But I don't know that so would like your input.

And maybe there's specific code that an Android needs?