Resize Embedded Video

[donmor3000]

Does anyone know how to resize videos imported into the wiki? For example, a video gets out of the bound on a phone, but appears so small in a desktop browser.

I once used HTML like this:

<video src="video" controls="controls" style="width:100%;height:100%;object-fit:contain"/>

And it looks pretty fine. But this "video" must be outside the wiki HTML file. Anyone have idea about hacking the embedded ones?

[Jon]

Hi,

I don't know if this helps but this works in my wiki to play a local video which can also be played full screen

<video    width="320" height="180"
    poster=""
    controls preload="none">
    <source src="LocalFolder/Filename.mp4" type="video/mp4">
</video>

Jon

[Greg Davis]

Hi,

Fiddled with the macro I normally used for local videos and tried direct coding but neither seemed to work for embedded video. As for size on desktop vs. phone, the included macro is for fluid video. Don't have a phone to try but works in responsive mode with Firefox and Chrome.

The macro is for local video in the same folder as the TiddlyWiki or in a sub-folder. Didn't try but should work if instead of folder use server and path to a served file.

Fluid youtube requires a style sheet  and if I recall was a little odd, seemed to fill tiddler regardless of size set. Cheated by putting macro inside a transparent table with the desired maximum width.

Sample macros and stamp attached.

Hope it gives you some ideas,
Greg

[Greg Davis]

If you really mean dragging your MP4 video into your TiddlyWiki, I think I may have found a way. Caution adding a lot of videos in your TiddlyWiki will slow it down, that is why it is usually suggested to use external videos. This is based on the mention of embedded MP3s in the docs.

It requires using the FluidVideoStyle I posted earlier. (This is for a 16x9 format video, you may have to adjust padding-bottom)
Embed your MP4 video. (I think TiddlyWiki only supports embedded MP4)
Create a new tiddler to display the video using the following (replace your-video.mp4 with your video name):

<center>
<div class="videowrapper">
{{your-video.mp4}}
</div></center>

You don't have to use center if not needed.

Again, hope that helps,
Greg

[donmor3000]

Well, I just created a pull request to Jermolene/TiddlyWiki5. I added this attribute to videoparser.js and audioparser.js to scale videos and audios:

style: {type: "string", value: "width: 100%; height: 100%; object-fit: contain"}

[A Gloom]

So the <video> html element scales to fit its container like <img> can if set for 100%?  I thought the 100% worked for height-- it doesn't for embed.

[donmor3000]

Well, I think the "object-fit: contain" thing matters actually.

在 2019年5月14日星期二 UTC+8上午9:52:11，A Gloom写道：

[A Gloom]

On Tuesday, May 14, 2019 at 12:33:10 AM UTC-4, donmor3000 wrote:

Well, I think the "object-fit: contain" thing matters actually.

I thought so, I had to use object-fit:contain on <object>, <embed> & <iframe>

[A Gloom]

This I'm currently testing with iframe content-- a container div to set size and -webkit-transform: scale() to scale the iframe content inside the div, it came from responsive page design for autoscaling iframe content to fit the page its embeded in.

<div style="width: 100%; height:100%; padding: 0; overflow: hidden;">
<iframe src="mapcitytest.html" width="100%" height="400" style="-webkit-transform: scale(1.0); -webkit-transform-origin: 0 0;"></iframe>
</div>

the original code--

zoom: 0.71;

-moz-transform: scale(0.71);

-moz-transform-origin: 0 0;

-o-transform: scale(0.71);

-o-transform-origin: 0 0;

-webkit-transform: scale(0.71);

-webkit-transform-origin: 0 0;

[TonyM]

Nice

Ctrl-zoom in tiddlywiki lets you resize the frame, even force it to be mobile responsive. All I could dream of now is to be able to increase the height by dragging the bottom of the iframe.

Nice work

In an aside, I have being recently playing with https://tiddlywiki.com/#WidgetMessage%3A%20tm-open-external-window for cases when the url refuses to open in side an iframe.

Regards

Tony

[A Gloom]

In an aside, I have being recently playing with https://tiddlywiki.com/#WidgetMessage%3A%20tm-open-external-window for cases when the url refuses to open in side an iframe.

 

As a manual "next resort" like a button to trigger the new window from the iframe not displaying or an automatic action if the iframe fails?

[TonyM]

If when embedding something in an iframe there are sites that will not permit it. Then rather than an iframe I provide a button to open in a new window.

Regards
Tony

[A Gloom]

If when embedding something in an iframe there are sites that will not permit it. Then rather than an iframe I provide a button to open in a new window.

ah kk, a "manual resort", good idea since (from the research I did for the embedding external content thread) some websites don't like being shown in iframes due to click-jacking.