Announcement

Collapse
No announcement yet.

Embedding YouTube videos?

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Embedding YouTube videos?

    Hello, I'm trying to embed YouTube videos in lieu of just using [video]xxxxx[/video[ option. I'm using vbulletin version 5.4

    Here's the tag I'm using:

    [youtube]Oh4kio5hYn8[/youtube]

    Here's the bb code I'm using:

    <iframe width="425" height="355" src="http://www.youtube.com/embed/Oh4kio5hYn8?rel=0" frameborder="0" allowfullscreen></iframe>

    Remove Tag if Empty - Yes
    Disable BB Code within this BB Code - No
    Disable Smiles within this BB Code - Yes
    Disable Word Wrapping within this BB Code - No
    Disable Automatic Link Parsing within this BB Code - No

    When I put in the ID number of the video, I get a blank screen. I'm new at this so I'm a bit stumped.

    Anyone know what I'm missing here?

    #2
    Your bbcode has static video id. It needs to be a placeholder by replacing it with {param}
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #3
      ok so that got me a box but the video won't play says an error occured so I looked at my bb code and it isn't what I typed

      <iframe width="425" height="355" src="http://www.youtube.com/embed/{param}/rel=0" frameborder="0" allowfullscreen></iframe>

      the "/rel=0" part should be "?rel=0"

      any reason why it changes it from a "?" to a "/"

      that will fix my embedding issues and the next coffee is definitely on me, thanks glenn

      Comment


        #4
        rel=0 is a querystring parameter to the URL. Querystrings should start with ? not /. Does the system change it to / ? This querystring is optional to YouTube video url. You don't have to include it. It's specifically for indicating not to show related videos when the video finished playing.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #5
          ok so all of sudden it's working so if it doesn't work I'll just delete that part later on

          thanks for the help again

          Comment


            #6
            You're welcome. Thanks for the coffee.
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #7
              I use the following replacement:
              Code:
              <div class="videoWrapperOuter"><div class="videoWrapperInner"><iframe
              src="https://www.youtube.com/embed/{param}?rel=0" frameborder="0"
              allowfullscreen></iframe></div></div>
              Note that I didn't add a fixed width and height in the replacement, but added two CSS classes to make sure that the BBCode is responsive. I have the following in my custom.css:
              Code:
              .videoWrapperOuter {
                  max-width: 640px;   
              }
              .videoWrapperInner {
                  float: none;
                  width: 100%;
                  position: relative;
                  padding-bottom: 50%;
                  padding-top: 25px;
                  height: 0;
              }
              .videoWrapperInner iframe {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
              }

              Comment


                #8
                Originally posted by Fleiding View Post
                I use the following replacement:
                Code:
                <div class="videoWrapperOuter"><div class="videoWrapperInner"><iframe
                src="https://www.youtube.com/embed/{param}?rel=0" frameborder="0"
                allowfullscreen></iframe></div></div>
                Note that I didn't add a fixed width and height in the replacement, but added two CSS classes to make sure that the BBCode is responsive. I have the following in my custom.css:
                Code:
                .videoWrapperOuter {
                max-width: 640px;
                }
                .videoWrapperInner {
                float: none;
                width: 100%;
                position: relative;
                padding-bottom: 50%;
                padding-top: 25px;
                height: 0;
                }
                .videoWrapperInner iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                }
                and what's your bb code example look like? [youtube]{URL}[/youtube]

                my code was working yesterday now it's not today, I think it has something to do with the example and the way it parses into the bb code

                Comment


                • Fleiding
                  Fleiding commented
                  Editing a comment
                  Code:
                  [youtube]9EybTIUgjs8[/youtube]

                #9
                The advantage of the default video bbcode over using custom YouTube bbcode is the default one does not load the video on page load. It just shows the video thumbnail and only calls youtube.com and loads the actual video when user clicks on the thumbnail. This means the page loads faster especially if there are multiple videos on the page.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #10
                  is there any way to have a YouTube BB code where you can just put the whole URL and not just copy the last part?
                  I mean for example:

                  instead of [youtube]aJoRMFWn2Jk[/youtube]

                  just put [youtube]https://www.youtube.com/watch?v=aJoRMFWn2Jk[/youtube]

                  what would be the correct code for that to work?

                  Comment


                    #11
                    If you use the Video toolbar button in the CKEditor, you can paste the entire YouTube URL.
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                      #12
                      When you do that, it will generate this BBCode which you can also type manually.

                      [VIDEO]https://www.youtube.com/watch?v=aJoRMFWn2Jk[/VIDEO]
                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      Fast VPS Host for vBulletin:
                      A2 Hosting & IONOS

                      Comment


                        #13
                        yeah I know, and that works fine too. but I would like to have the YouTube player embedded directly, even if loads more data

                        Comment


                          #14
                          If you want the full URL then the user has to use the embed YouTube URL https://www.youtube.com/embed/[video id] which most people don't know. The regular YouTube URL cannot be embedded in an iframe for security reason.

                          If you use the full embed URL, then use
                          src="{param}" in the iframe tag in the BBCode Replacement code, But the disadvantage with that is a user can put any URL (not just YouTube) in the BBCode tag and it will show the site inside the iframe if the site allows to be embedded in the iframe. A malicious user could take advantage of it by using a URL to a malware/virus or something. That's why it's more secure to just use part of the URL, the YouTube video id in this case, as the input for BBCode and not the entire URL.
                          Helpful? Donate. Thanks!
                          Buy me a coffeePayPal QR Code
                          Fast VPS Host for vBulletin:
                          A2 Hosting & IONOS

                          Comment

                          Latest Topics

                          Collapse

                          Working...
                          X
                          Searching...Please wait.
                          An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                          Please push the back button and reload the previous window.'
                          An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                          Please push the back button and reload the previous window.'
                          An internal error has occurred and the module cannot be displayed.
                          There are no results that meet this criteria.
                          Search Result for "|||"