BBcode : Background for Video

[Seraf]

Hello: Hello everyone.
I have a request that may be of interest to other users.
There should be a 'background bbcode' that displays the full size
image {topic} so that the 'media embed' video (youtube:80%) can
be placed on it.

Example : background




Example : background + video



I searched the forum, but I only found a bbcode option for text,
which is not good for video display.

Thank you in advance for your help .

[Sniper_E]

I like that wrapper you have there. I grabbed it. I think I could work something up with this.
I like the look of the video in that wrapper also.

I know there are a few youtube video bbcodes that work fine. Just need to find a simple one.
There is a good embed media extension that might allow you to put the youtube video url in and it will show the video in the wrapper.
I'll put together a video wrapper bbcode you can put your video bbcode in or your images.

[Brf]

That would not be appropriate for a bbcode. What you would want to do is change whatever code is displaying a video to also display that background.

[Seraf]

I'm interested in any solution, but all I need is a simple 'background
bbcode' that displays the image in full size. The video can be called /
placed separately on this background image ;
- phpBB Media Embed PlugIn
https://www.phpbb.com/customise/db/exte ... ediaembed/

I tried the
- BB code for background image in topic
viewtopic.php?t=2489946
option : Works ; The background + video as well, but bbcode only
shows the background image in the size of the video, because the
code is made for text ( so the top and bottom of the background
image are missing ) .

The size of the images is a
- Made for Purplexion style
https://www.phpbb.com/customise/db/style/purplexion/
with the 'Media Embed PlugIn' video ( youtube:80% ) setting, but
proportional { +/- } scaling of the background image can be used
for any style due to the png format .

Plus background image for the code





Thank you for your interest / help .

[Seraf]

This is how far I've come at the moment .

Code: Select all

ORIGINAL BB CODE
[background={URL}]{TEXT}[/background]
ORIGINAL HTML CODE
<div style="background: url('{URL}') no-repeat; background-size: 100%; background-position: top; color: white;">{TEXT}</div>

Code: Select all

MODIFIED HTML CODE
<div style="background: url('{URL}') no-repeat; background-size: 85% 100%; background-position: center;">{TEXT}</div>
POST CODE
[align=center][background="https://.....VIDEO-BG-A.png"]
[media]https://www.youtube.com/watch?v=LVQJEHmgYBc[/media][/background][/align]

[Sniper_E]

This is how far I've come at the moment.

vidwrap.png

You'll see videos come in all sizes and shapes.

I use a youtube bbcode that sets width and height of the iframe... [youtube={NUMBER1},{NUMBER2}]{IDENTIFIER}[/youtube]
Then I'm working on this video wrapper bbcode that will expand depending on the size of the video you set.

[cabot]

Hello,

Suggestion:

Code: Select all

[bg={URL}]{TEXT}[/bg]

Code: Select all

<div style="background: url('{URL}') no-repeat 0 0 / 80% auto; aspect-ratio: 1200 / 820; padding: 5.5% 1.8% 0 1.2%;">{TEXT}</div>

Usage example (assuming you have installed the "phpBB Media Embed PlugIn" extension):

Code: Select all

[bg="https://zalaclub.hu/PLUSZ/ZC-IMAGE/VIDEO-BG-D.png"]https://www.youtube.com/watch?v=54LEywabkl4[/bg]

[Seraf]

Thank you very much. The code works. Media Embed is installed.
Plus it also works in the middle (with 'background-position: top' setting)

Code: Select all

MODIFIED BB CODE
[bgc={URL}]{TEXT}[/bgc]

MODIFIED HTML CODE
<div style="background: url('{URL}') no-repeat 0 0 / 80% auto; aspect-ratio: 1200 / 820; padding: 5.7% 1.8% 0 1.8%; background-position: top;">{TEXT}</div>

POST (SAMPLE) CODE
[align=center][bgc="https://....VIDEO-BG-D.png"]https://www.youtube.com/watch?v=54LEywabkl4[/bgc][/align]

A small aesthetic problem is that the text below the video appears much lower (the one above it is good)

[cabot]

Change the aspect-ratio value:

Code: Select all

aspect-ratio: 2 / 1.02;

[Seraf]

Thank you very much .



BG - LEFT

Code: Select all

BB CODE
[bg={URL}]{TEXT}[/bg]

HTML CODE
<div style="background: url('{URL}') no-repeat 0 0 / 80% auto; aspect-ratio: 2 / 1.02; padding: 5.5% 1.8% 0 1.2%;">{TEXT}</div>

POST (SAMPLE) CODE
[bg="https://....VIDEO-BG-D.png"]https://www.youtube.com/watch?v=54LEywabkl4[/bg]

BG - CENTER

Code: Select all

BB CODE
[bgc={URL}]{TEXT}[/bgc]

HTML CODE
<div style="background: url('{URL}') no-repeat 0 0 / 80% auto; aspect-ratio: 2 / 1.02; padding: 5.7% 1.8% 0 1.8%; background-position: top;">{TEXT}</div>

POST (SAMPLE) CODE
[align=center][bgc="https://....VIDEO-BG-D.png"]https://www.youtube.com/watch?v=54LEywabkl4[/bgc][/align]

[Sniper_E]

I remember working on a wrapper like this many many years ago.
But I used a big screen TV image as a background. It was pretty cool.

Like my old TV image I cut your image up in pieces and used them as background in a table.
Setting an images in each cell as background allowed me to make it expandable in size.

This is your image chopped up and put it in an expandable table. Check it out.
It's not an extension yet and the css is thrown in an existing stylesheet for now.

[Mick]

@OP - I’m happy to see there are still some house lovers. Alice Deejay is a bit ‘soft’ for my taste but dance is dance.

[Sniper_E]

Background for video bbcode extension is out for testing: viewtopic.php?t=2655493