bbcode for responsive video

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

bbcode for responsive video

Post by bttan »

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: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: bbcode for responsive video

Post by Lumpy Burgertushie »

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
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
bttan
Registered User
Posts: 83
Joined: Mon Feb 16, 2015 4:37 pm

Re: bbcode for responsive video

Post by bttan »

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: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: bbcode for responsive video

Post by Lumpy Burgertushie »

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
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
bttan
Registered User
Posts: 83
Joined: Mon Feb 16, 2015 4:37 pm

Re: bbcode for responsive video

Post by bttan »

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: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: bbcode for responsive video

Post by Lumpy Burgertushie »

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.
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
User avatar
JoshyPHP
Code Contributor
Posts: 1288
Joined: Mon Jul 11, 2011 12:28 am

Re: bbcode for responsive video

Post by JoshyPHP »

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 library that handles markup in phpBB 3.2+.
bttan
Registered User
Posts: 83
Joined: Mon Feb 16, 2015 4:37 pm

Re: bbcode for responsive video

Post by bttan »

Hi JoshyPHP,

Yes, it works!

Thank you very much!
KYPREO
Registered User
Posts: 392
Joined: Fri Feb 02, 2018 9:56 am
Contact:

Re: bbcode for responsive video

Post by KYPREO »

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”