Announcement

Collapse
No announcement yet.

Replace Embedded Flash Videos with HTML5 Videos

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

    Official - Free Replace Embedded Flash Videos with HTML5 Videos

    With Flash being blocked by default in Chrome, vB5's way of embedding video has to keep up with the times. Currently vB5.3.0 is still using Flash when embedding videos for Vimeo, DailyMotion, Metacafe, Hulu, and Google. The last two actually need to be removed as Hulu (like Netflix) is a paid service so sharing a Hulu video will not work and Google Video no longer exists for obvious reason.

    Someone had posted a question in vB support forum saying non-youtube videos don't work in vB5. A support staff confirmed the issue and created a JIRA bug report. I investigated the issue and found out that the issue was due to the usage of Flash in most of the supported video providers.

    We don't know when vB will fix this issue so if you can't wait, I went ahead and implemented a temporary solution by editing the bbcode_video template. See code below, the code in red should be added while the code in gray is no longer needed and commented out using <vb:comment></vb:comment> tags in order to be ignored by the parser. I chose to comment them out instead of totally removing from the template to minimize complex template merge conflicts whenever you upgrade.

    UPDATE: vBulletin had already removed the Flash-based videos on the bbcode_video template in one of the past releases. You don't need this mod anymore.

    Code:
    <vb:if condition="$provider == 'hulu'">
        <object class="restrain" type="application/x-shockwave-flash" width="<vb:if condition="isset($width) AND $width > 0">{vb:raw width}<vb:else />512</vb:if>" height="<vb:if condition="$height">{vb:raw height}<vb:else />296</vb:if>" data="http://www.hulu.com/embed/{vb:raw code}">
        <param name="movie" value="http://www.hulu.com/embed/{vb:raw code}" />
        <param name="wmode" value="{vb:raw vboptions.player_wmode}" />
        </object>
    <vb:elseif condition="$provider == 'youtube'" />
        <iframe class="restrain" title="YouTube video player" 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>" src="//www.youtube.com/embed/{vb:raw code}?wmode={vb:raw vboptions.player_wmode}&autoplay=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        <vb:elseif condition="$provider == 'youtube_share'" />
        <iframe class="restrain" title="YouTube video player" 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>" src="//www.youtube.com/embed/{vb:raw code}?wmode={vb:raw vboptions.player_wmode}&autoplay=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <vb:elseif condition="$provider == 'vimeo'" />
    <iframe src="https://player.vimeo.com/video/{vb:raw code}?autoplay=1" 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 />360</vb:if>" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <vb:comment>
    <object class="restrain" type="application/x-shockwave-flash" 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 />360</vb:if>" data="http://vimeo.com/moogaloop.swf?clip_id={vb:raw code}&autoplay=1">
        <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id={vb:raw code}" />
        <param name="wmode" value="{vb:raw vboptions.player_wmode}" />
        </object>
    </vb:comment>
    <vb:elseif condition="$provider == 'dailymotion'" />
    <iframe src="//www.dailymotion.com/embed/video/{vb:raw code}?autoplay=1" frameborder="0" width="<vb:if condition="isset($width) AND $width > 0">{vb:raw width}<vb:else />480</vb:if>" height="<vb:if condition="$height">{vb:raw height}<vb:else />270</vb:if>" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <vb:comment>
        <object class="restrain" type="application/x-shockwave-flash" width="<vb:if condition="isset($width) AND $width > 0">{vb:raw width}<vb:else />420</vb:if>" height="<vb:if condition="$height">{vb:raw height}<vb:else />339</vb:if>" data="http://www.dailymotion.com/swf/{vb:raw code}?autoPlay=1">
        <param name="movie" value="http://www.dailymotion.com/swf/{vb:raw code}" />
        <param name="wmode" value="{vb:raw vboptions.player_wmode}" />
        </object>
        </vb:comment>
    <vb:elseif condition="$provider == 'metacafe'" />
    <iframe src="http://www.metacafe.com/embed/11421496/" width="<vb:if condition="isset($width) AND $width > 0">{vb:raw width}<vb:else />560</vb:if>" height="<vb:if condition="$height">{vb:raw height}<vb:else />315</vb:if>" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <vb:comment>
        <object class="restrain" type="application/x-shockwave-flash" width="<vb:if condition="isset($width) AND $width > 0">{vb:raw width}<vb:else />400</vb:if>" height="<vb:if condition="$height">{vb:raw height}<vb:else />345</vb:if>" data="http://www.metacafe.com/fplayer/{vb:raw code}.swf">
        <param name="movie" value="http://www.metacafe.com/fplayer/{vb:raw code}.swf" />
        <param name="wmode" value="{vb:raw vboptions.player_wmode}" />
        <param name="flashVars" value="playerVars=autoPlay=yes" />
        </object>
        </vb:comment>
    <vb:elseif condition="$provider == 'google'" />
        <object class="restrain" type="application/x-shockwave-flash" width="<vb:if condition="isset($width) AND $width > 0">{vb:raw width}<vb:else />400</vb:if>" height="<vb:if condition="$height">{vb:raw height}<vb:else />326</vb:if>" data="http://video.google.com/googleplayer.swf?docid={vb:raw code}&autoplay=1">
        <param name="movie" value="http://video.google.com/googleplayer.swf?docid={vb:raw code}" />
        <param name="wmode" value="{vb:raw vboptions.player_wmode}" />
        </object>
    <vb:elseif condition="$provider == 'facebook'" />
        <iframe src="https://www.facebook.com/video/embed?video_id={vb:raw code}" width="<vb:if condition="isset($width) AND $width > 0">{vb:raw width}<vb:else />576</vb:if>" height="<vb:if condition="$height">{vb:raw height}<vb:else />432</vb:if>" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    vb:elseif condition="$provider == 'facebook_2017'" />
        <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2F{vb:urlencode {vb:raw code}}&show_text=0" width="<vb:if condition="isset($width) AND $width > 0">{vb:raw width}<vb:else />576</vb:if>" height="<vb:if condition="$height">{vb:raw height}<vb:else />432</vb:if>" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </vb:if>
    While I was at it, I also added allowfullscreen attributes to YouTube and Facebook videos. This was missing in the iframe tag which prevented the videos to be maximized to fullscreen.

    NOTE: Since this is a template edit, your changes might result in loss or template merge conflicts whenever you perform an upgrade. You would need to restore or resolve the conflicts to make sure the above changes are intact after an upgrade.
    Last edited by glennrocksvb; 03-27-2019, 12:21 PM.

    #2
    Sample Vimeo video using the modified template:

     

    Comment


      #3
      Sample DailyMotion video using the modified template:
       

      Comment


        #4
        Hi,
        This article was very helpful thank you so much

        Regards
        samiksha.c
        Last edited by glennrocksvb; 07-26-2017, 11:37 AM.

        Comment


          #5
          Does not work with copy vb5.3.4

          Comment


          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            Could you elaborate what exactly is not working or what is happening?

          #6
          Originally posted by supportip View Post
          Does not work with copy vb5.3.4
          Template bbcode_video is offline

          mediabbcode_video

          Code:
          <vb:if condition="$provider == 'hulu'">
          <object class="restrain" type="application/x-shockwave-flash" width="128" height="74" data="http://www.hulu.com/embed/{vb:raw code}">
              <param name="movie" value="http://www.hulu.com/embed/{vb:raw code}" />
              <param name="wmode" value="transparent" />
          </object>
          <vb:elseif condition="$provider == 'youtube'" />
          <object class="restrain" type="application/x-shockwave-flash" width="160" height="96" data="http://www.youtube.com/v/{vb:raw code}?version=3&amp;color1=0xb1b1b1&amp;color2=0xcfcfcf&amp;feature=player_embedded">
              <param name="movie" value="http://www.youtube.com/v/{vb:raw code}?version=3&amp;color1=0xb1b1b1&amp;color2=0xcfcfcf&amp;feature=player_embedded" />
              <param name="wmode" value="transparent" />
              <param name="allowfullscreen" value="true" />
          </object>
          <vb:elseif condition="$provider == 'vimeo'" />
          <object class="restrain" type="application/x-shockwave-flash" width="160" height="96" data="http://vimeo.com/moogaloop.swf?clip_id={vb:raw code}">
              <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id={vb:raw code}" />
              <param name="wmode" value="transparent" />
          </object>
          <vb:elseif condition="$provider == 'dailymotion'" />
          <object class="restrain" type="application/x-shockwave-flash" width="140" height="112" data="http://www.dailymotion.com/swf/{vb:raw code}">
              <param name="movie" value="http://www.dailymotion.com/swf/{vb:raw code}" />
              <param name="wmode" value="transparent" />
          </object>
          <vb:elseif condition="$provider == 'metacafe'" />
          <object class="restrain" type="application/x-shockwave-flash" width="100" height="86" data="http://www.metacafe.com/fplayer/{vb:raw code}.swf">
              <param name="movie" value="http://www.metacafe.com/fplayer/{vb:raw code}.swf" />
              <param name="wmode" value="transparent" />
          </object>
          <vb:elseif condition="$provider == 'google'" />
          <object class="restrain" type="application/x-shockwave-flash" width="100" height="82" data="http://video.google.com/googleplayer.swf?docid={vb:raw code}">
              <param name="movie" value="http://video.google.com/googleplayer.swf?docid={vb:raw code}" />
              <param name="wmode" value="transparent" />
          </object>
          <vb:elseif condition="$provider == 'facebook'" />
              <iframe src="https://www.facebook.com/video/embed?video_id={vb:raw code}" width="<vb:if condition="isset($width) AND $width > 0">{vb:raw width}<vb:else />144</vb:if>" height="<vb:if condition="$height">{vb:raw height}<vb:else />108</vb:if>" frameborder="0"></iframe>
          </vb:if>

          Comment


            #7
            What did you mean by "Template bbcode_video is offline"?

            Comment


              #8
              Originally posted by glennrocksvb View Post
              What did you mean by "Template bbcode_video is offline"?
              I mean that this template bbcode_video not here

              Comment


                #9
                That's a problem. The bbcode_video template should exist. It is used for displaying videos in a post. The other template mediabbcode_video is I think used in albums in the Media tab in the Profile page.

                Comment


                  #10
                  I have tried to apply your fixes to my vBulletin Version 5.2.4 and it doesn't work. Vimeo links will not be embedded, it has never worked for me and looks like many others are having the same issue. I also tried the full screen mode on YouTube videos after updating the bbcode you kindly shared with us and the problem still persists. I must click on YouTube title of the embedded video and vimeo links are not embedded in the posts. I am lost, don't know what to do See attachment.

                  Click image for larger version

Name:	vimeo.png
Views:	8
Size:	97.3 KB
ID:	13569

                  Comment


                    #11
                    Please post the updated bbcode_video template and I'll take a look.

                    But why are you running an old unsupported version 5.2.4. It has unpatched security vulnerabilities that hackers could exploit. You have a much bigger problem than having non-working embedded videos. I highly recommend you to upgrade to the latest version.

                    Comment


                      #12
                      Hello Glenn,

                      There is no bbcode_video template !
                      The Only found is mediabbcode_video
                      please give a look

                      Thanx

                      Comment


                        #13
                        vBulletin had already removed the Flash-based videos on the bbcode_video template in one of the past releases. You don't need this mod anymore.

                        But having no bbcode_video is a separate issue. Blackhorse, you didn't find that template in any of the default vB styles/themes?

                        Comment


                          #14
                          Originally posted by glennrocksvb View Post
                          vBulletin had already removed the Flash-based videos on the bbcode_video template in one of the past releases. You don't need this mod anymore.

                          But having no bbcode_video is a separate issue. Blackhorse, you didn't find that template in any of the default vB styles/themes?
                          Hello @glennrocksvb
                          No, not at all. I have searched all templates for bbcode_video and the only result is mediabbcode_video

                          Regards,

                          Comment


                          • glennrocksvb
                            glennrocksvb commented
                            Editing a comment
                            So what happens when someone posted a YouTube video on your forum using the Video icon in the editor toolbar or the chain icon at the upper left corner of the editor?

                          #15
                          @glennrocksvb

                          Give a look here on the following link please, Videos are shown with play tab, but whatever click you do, it shows no play as if it is just a picture

                          https://www.hurras.org/new/forum/%D9...%D9%87?t=58451

                          Thanks

                          Comment

                          Working...
                          X