bbcode for responsive video

Get help developing custom BBCodes or request one.
Post Reply
bttan
Registered User
Posts: 54
Joined: Mon Feb 16, 2015 4:37 pm

bbcode for responsive video

Post by bttan » Sat Oct 15, 2016 12:28 pm

Hi,

I have a custom bbcode for video and i am trying to make it responsive.

This is the code I created by googling but it is not working. Anyone can help?

Code: Select all

<div class="responsive-object" {
  position: relative;
  padding-bottom: 67.5%;
  height: 0;
  margin: 10px 0;
  overflow: hidden;
}> 

<div class="responsive-object video" {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}>


  <video controls/>
<source src="{URL}" type="video/mp4">


</video>
</div>
Last edited by JimA on Sat Oct 15, 2016 12:37 pm, edited 1 time in total.

User avatar
Lumpy Burgertushie
Registered User
Posts: 65187
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: bbcode for responsive video

Post by Lumpy Burgertushie » Sat Oct 15, 2016 3:15 pm

to use the html5 video tags you don't need any of that.

here is what I have:

bbcode:[vids]{URL}[/vids]

html:

Code: Select all

<video  width="100%" controls>
  <source src="{URL}" type="video/mp4">
 
  Your browser does not support the video tag.
</video>
by default that is responsive.

robert
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

bttan
Registered User
Posts: 54
Joined: Mon Feb 16, 2015 4:37 pm

Re: bbcode for responsive video

Post by bttan » Sat Oct 15, 2016 6:16 pm

hi,

thanks for the reply but width="100%" is not responsive.

it looks nice on iphone.

but not on pc, it is not, because for small video, it gets too big and stretches to the the edge of the container and the video becomes not clear, bad resolution.

embedly says:

http://docs.embed.ly/docs/responsive-embeds

i am actually asking how can i convert the html code from embedly to bbcode?

anyway, thanks for the reply

User avatar
Lumpy Burgertushie
Registered User
Posts: 65187
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: bbcode for responsive video

Post by Lumpy Burgertushie » Sat Oct 15, 2016 6:26 pm

I am not seeing that. can you give me the url of the video you are testing with so I can see if it does the same for me?

the video I tested with is this one:
http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

bttan
Registered User
Posts: 54
Joined: Mon Feb 16, 2015 4:37 pm

Re: bbcode for responsive video

Post by bttan » Sun Oct 16, 2016 3:25 am

hi,

i have tested your video using your code and the video is full width on my monitor.

My monitor is 32" wide.

I do not want the video to be 100% width on my computer. I want it to be original size of the video, maybe (75%)

But i want it to be 100% width on phone.

Anyway, thanks for your reply.

User avatar
Lumpy Burgertushie
Registered User
Posts: 65187
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: bbcode for responsive video

Post by Lumpy Burgertushie » Sun Oct 16, 2016 3:31 am

doesn't do that for me. the video shows up at its normal size on my 32 inch monitor.

when you reduce the size of the window, it reduces proportionally as it should.

there must be something different about how you are creating the bbcode or your browser settings etc.

sorry, I don't know how to help you with whatever that problem is.

go here to see my test of this:
https://phpbbusers.com/viewtopic.php?f=16&t=29


view it at any screen size you want and the video should be responsive to that screens size.


robert

edit: I have fixed the link and also added the max width mentioned in the post below.

robert
Last edited by Lumpy Burgertushie on Mon Jun 04, 2018 4:50 am, edited 1 time in total.
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

User avatar
JoshyPHP
Code Contributor
Posts: 963
Joined: Mon Jul 11, 2011 12:28 am

Re: bbcode for responsive video

Post by JoshyPHP » Sun Oct 16, 2016 9:40 am

bttan's board probably uses a fluid style. Add a max-width value to the video's style if you want to limit its width. I didn't test it but I assume it works. I'd use that:

Code: Select all

<video src="{URL}" style="width:100%;max-width:640px" controls></video>
I wrote the thing that does BBCodes in 3.2.

bttan
Registered User
Posts: 54
Joined: Mon Feb 16, 2015 4:37 pm

Re: bbcode for responsive video

Post by bttan » Sun Oct 16, 2016 10:12 am

Hi JoshyPHP,

Yes, it works!

Thank you very much!

User avatar
KYPREO
Registered User
Posts: 79
Joined: Fri Feb 02, 2018 9:56 am
Contact:

Re: bbcode for responsive video

Post by KYPREO » Mon Jun 04, 2018 2:21 am

JoshyPHP wrote:
Sun Oct 16, 2016 9:40 am
bttan's board probably uses a fluid style. Add a max-width value to the video's style if you want to limit its width. I didn't test it but I assume it works. I'd use that:

Code: Select all

<video src="{URL}" style="width:100%;max-width:640px" controls></video>
Bump with a vote of thanks for this BBcode. I managed to implement this on my board and it works fantastically. It even works for MP4s uploaded as attachments.
phpBB user since 2002
www.AusRotary.com

Post Reply

Return to “Custom BBCode Development and Requests”

Who is online

Users browsing this forum: No registered users and 5 guests