Announcement

Collapse
No announcement yet.

Video Player dimensions

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Video Player dimensions

    I need to set the player dimensions same as the initial thumbnail (300x225) - (if the users need, they can click the full screen icon in the player).

    When I click the thumbnail, the player expands and becomes large to fit the content area. I tried CSS'ing it a lot in the inspector where it works but when the page loads, it just renders the player in full size when clicked on the thumbnail fitting the content area.

    Here is what I tried in the inspector which works -

    Code:
    @ media only screen and (min-width: 695px)
    .videocontainer .restrain {
    width: 300px !important;
    height: 225px !important;
    }
    
    .html5-video-player, .videocontainer, .l-small .videocontainer .restrain, .ytp-cued-thumbnail-overlay, .ytp-cued-thumbnail-overlay-image, #player {height: 225px !important; width: 300px !important}
    On clicking the thumbnail, the player switches to full content size again and I'm not able to control it.

    Is there a style var that needs to be edited to control the player dimensions? I looked in some templates, it is using {height} and {width} - not sure where they are coming from.

    TIA
    Last edited by webcms; Tue 24th Mar '20, 2:10pm.

  • #2
    CSS that affects the size of the player has no effect on the size of the video. 300 X 225 isn't even a proper aspect ratio for most modern videos which are 16:9

    You should probably start here: https://www.w3schools.com/html/html5_video.asp.

    Comment


    • #3
      I am particular about the 300px width - don’t mind the height even if it is auto height.

      Not able to figure out how to force the dimension for the player.

      Comment


      • #4
        What you're seeing are actually two different things.

        When you view the post, you're seeing a thumbnail image provided by the video provider. This static image reduces bandwidth and page loading times. When a user clicks on the thumbnail, JavaScript will contact the video provider and load the video to start playing it. This happens after the page is initially rendered and the CSS is loaded. The video is usually loaded in an iframe and under control of the JavaScript and the video provider.

        Why constrain the size of the video though?
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API - Full / Mobile
        Vote for your favorite feature requests and the bugs you want to see fixed.

        Comment


        • #5
          Originally posted by Wayne Luke View Post
          What you're seeing are actually two different things.

          When you view the post, you're seeing a thumbnail image provided by the video provider. This static image reduces bandwidth and page loading times. When a user clicks on the thumbnail, JavaScript will contact the video provider and load the video to start playing it. This happens after the page is initially rendered and the CSS is loaded. The video is usually loaded in an iframe and under control of the JavaScript and the video provider.

          Why constrain the size of the video though?
          Correct, the initial thumbnail size of 300px is what I’m shooting for, for the player. When clicked on the thumbnail, it renders the player to fit the content.

          If I do not constrain the player, the newspaper column layout I’m trying to implement on content (for easier readability) is fine but the video player is stretching beyond the content into the side bar panel and beyond. Newspaper column layout divides the content into 2 vertical columns and can accommodate the player with 300px width without this bleeding.

          Please see here -

          https://mobilemusic.us/forum/music-a...music-software

          Comment


          • #6
            This might be hard to maintain as you would have to change the file every upgrade and it will probably show as a false positive when you look at Suspect Files.
            1. Go to /core/includes/xml.
            2. Edit the bbcode_video_vbulletin.xml file.
            3. In the two YouTube sections, look for height and width and hard code them.
            The code to change will look like this:
            width="<vb:if condition="isset($width) AND $width > 0">{vb:raw width}<vb:else />640</vb:if>" height="<vb:if condition="$height">{vb:raw height}<vb:else />390</vb:if>"

            You would want it to look like:
            width="<vb:if condition="isset($width) AND $width > 0">{vb:raw width}<vb:else />300</vb:if>" height="<vb:if condition="$height">{vb:raw height}<vb:else />225</vb:if>"


            Then to rebuild the BB Code, you have to do this:
            1. Put the site into debug mode.
            2. At the bottom of the left navigation go to Rebuild.
            3. Then select "Rebuild Video BB Codes."
            4. Remove debug mode.
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud demonstration site.
            vBulletin 5 API - Full / Mobile
            Vote for your favorite feature requests and the bugs you want to see fixed.

            Comment


            • #7
              Hi Wayne,

              You are a Rock Star on this forum!

              Thank you so much for your time - it's highly appreciated

              Comment

              Related Topics

              Collapse

              • GrdPa
                BBCode [video]
                by GrdPa
                Hello,
                The BBCode [video] create an iframe with a width = 640. This is not adaptive with the vbulletin's defaut template which is adapted to the resolution of the screen.
                It is more ergonomic...
                Mon 14th Jan '13, 10:12pm
              • yv3013
                Youtube video's
                by yv3013
                Youtube video's used to expand when viewed but the video button doesn't work like it did anymore.

                If I click on "Insert Video" under the "A" tab, all it does is insert...
                Tue 26th Aug '14, 10:58pm
              • musicoff
                Edit size of running embedded videos.
                by musicoff
                Hi everyone.
                We would like to heavily increase width and slightly decrease height for embedded videos while they're running, since we really don't like the actual size (see attachment).
                M...
                Fri 20th Jan '17, 7:17am
              • humpty
                Videos in a lightbox
                by humpty
                Would it be possible to have posted videos breakout into a lightbox environment? For example, when a YT video is posted using the Post a Link option, the video appears almost thumbnail size, which is...
                Tue 29th Jan '13, 1:03am
              • humpty
                Video Size
                by humpty
                Is there any way to adjust the size of embedded videos from YT using the Post Link feature? At present the videos are very small - the same size you see them on YT would be preferred if it's possibl...
                Sun 30th Dec '12, 10:10am
              Working...
              X