Media Manager full width videos

You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Online

Official support hours

Monday to Friday
09:00 - 17:00 Europe/London (BST)

#101202 Media Manager full width videos

Posted in ‘Editor’

This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Joris on Tuesday, 28 January 2020 15:43 GMT

Tuesday, 24 September 2019 21:28 BST

enjan

Hello,

Strange, but for the first time I found that Media Manager is offering the feature to embed a video immediately by pasting the URL(Great Feature 🙂 )

Unfortunately, I can't find anywhere when I can set up the video size(width & height), but it looks that a size 480px is placed on every video

Also, it seems that the fields in Media Manager are not offering the ability to set the video size in % because in my case I want to set the width 100% as a default size for every video that is being inserted from Media Manager.

Thank you in advance!

Attachments

Wednesday, 25 September 2019 16:35 BST

Ryan

Strange, but for the first time I found that Media Manager is offering the feature to embed a video immediately by pasting the URL(Great Feature 🙂 )

This is a new feature in JCE Pro 2.8.0. Media links - Youtube, Vimeo, Soundcloud, Slideshare, Spotify, Facebook, Twitch, Ted and Instagram - can be pasted directly into the editor, or inserted using the drop-down dialog. The data for the video - width, height, embed url - is obtained directly from the provider via the OEmbed Endpoint for the provider.

You can adjust the properties of the video using the Media Manager or IFrames dialog.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Thursday, 26 September 2019 13:30 BST

enjan

What about setting the default videos in percentages sizes?

Monday, 30 September 2019 14:45 BST

Ryan

Inserting video using the new drop-down and paste methods does not yet use the parameter values, but the values obtained directly from the provider.

As Youtube, Vimeo etc. video is embedded using iframes - which are not sized by their content, only their set dimensions - setting a width value of 100% does not proportionally scale the video, as images do. This will result in a letterbox effect with Youtube videos, unless you supply a proportional height value for the video yourself.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Thursday, 24 October 2019 19:19 BST

DaveOzric

I have used a responsive embed before on sites to make the video fill the container. Is this possible to have in your settings so I can select say "full width" and get a 100% video proportionate to height and width?

<div style="text-align: center;">
<div align="center" class="embed-responsive embed-responsive-16by9">

Friday, 25 October 2019 10:42 BST

Ryan

I have used a responsive embed before on sites to make the video fill the container. Is this possible to have in your settings so I can select say "full width" and get a 100% video proportionate to height and width?

<div style="text-align: center;">
<div align="center" class="embed-responsive embed-responsive-16by9">

This uses Bootstrap code. You could use the Custom Style Format tools (Editor Profiles -> Plugin Parameters -> Style Select) to create a Style that applies a div with the responsive class, to any selected iframe - https://www.joomlacontenteditor.net/support/tutorials/editor/creating-custom-styles

I ave also create a Joomla plugin that does something similar - https://github.com/widgetfactory/wf_responsive_widgets/releases/tag/1.0.10

This 1.0.10 release makes the video responsive and full width. The 1.0.12 release makes the video responsive but keeps the original width - https://github.com/widgetfactory/wf_responsive_widgets/releases

I plan to combine these into 1 release with an option to determine how the width is treated.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Friday, 25 October 2019 13:12 BST

DaveOzric

I see now, I did not realize that. Thank you for the detailed explanation!

Monday, 20 January 2020 10:38 GMT

Joris

This uses Bootstrap code. You could use the Custom Style Format tools (Editor Profiles -> Plugin Parameters -> Style Select) to create a Style that applies a div with the responsive class, to any selected iframe - https://www.joomlacontenteditor.net/support/tutorials/editor/creating-custom-styles

Can you please explain how to do this, 'apply a div to any iframe'? Is it possible to select an iframe, choose a style (named like 'Video embed') which adds a div around the iframe with the Bootstrap class. So:

<iframe>youtube</iframe>

becomes:

<div class="embed-responsive embed-responsive-16by9">
  <iframe>youtube</iframe>
</div>

Edited by Joris on 2020-01-21 08:53 GMT

Monday, 20 January 2020 16:24 GMT

Joris

By the way 1: In Custom Style Format tools the styles seems to be not editable in version 2.8.3.
The class ".ui-jce .styleformat-collapse > div" has a "display: none" when I try to add a custom style; it remains non displayed (till I remove this declaration).

By the way 2: In verison 2.8.3 selecting the div or p around the iframe seems to be impossible (by element path bar too). Is it me and or is it a minor 2.8 problem?

Edited by Joris on 2020-01-21 08:50 GMT

Wednesday, 22 January 2020 19:51 GMT

Ryan

By the way 1: In Custom Style Format tools the styles seems to be not editable in version 2.8.3.
The class ".ui-jce .styleformat-collapse > div" has a "display: none" when I try to add a custom style; it remains non displayed (till I remove this declaration).

I am not having any issue adding a custom style in my tests. Please post a screenshot to explain your issue.

By the way 2: In verison 2.8.3 selecting the div or p around the iframe seems to be impossible (by element path bar too). Is it me and or is it a minor 2.8 problem?

Also not encountering this problem. Clicking outside of the iframe should select the div or paragraph the iframe is contained in. You should then also be able to select it using the Path.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Thursday, 23 January 2020 13:36 GMT

Joris

BTW1 seems to be incidental. Sorry for that one.

BTW2 is reproducable, I think:
I placed a video iframe in a basic paragraph (by Media Manager quick link).
First I click on the video, I see 'p >> iframe' in the element path.
Than I try to select the paragraph by clicking just near the iframe and/or by clicking on the 'p' in the element path bar.
Now the Format list changes to 'Span' (while there is no span in my code) and changing Styles does not function.
When the p is a div, the Format list changes to 'Format' and changing Styles does not function too.

Besides this: can you please try too answer my question/expectation just before these btw's?

TIA
Kind regards
Joris

Attachments

Friday, 24 January 2020 12:15 GMT

Ryan

Please try JCE Pro 2.8.4 RC3 - https://www.joomlacontenteditor.net/downloads/editor/pro/development

This will fix the issue with moving the cursor off the iframe when it is inserted by pasting in a Youtube link.

To assign any formatting or styles to the iframe or its parent element, switch to the placeholder fomr the live preview using CTRL + Click on the iframe (or CMD + Click on the Mac). Then select the placeholder and assign the required formatting. Example:

https://cdn.joomlacontenteditor.net/images/news/282/media_preview_label.gif

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Friday, 24 January 2020 14:14 GMT

Joris

Thanks. This helps for only the first time. So I can add a Style now.
But still I can not use the element path bar to select the p around the iframe, I cannot change the style, because I cannnot select the p.

That's no problem for me (working in source code), but it would be nice for my site users to do this the easy way.

Monday, 27 January 2020 19:54 GMT

Ryan

I have made some tweaks in RC6 - https://www.joomlacontenteditor.net/downloads/editor/pro/development

It should be easier now to apply Styles and Formats to the iframe's parent / container element.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Tuesday, 28 January 2020 15:43 GMT

Joris

It is! Thank you.