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.
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.
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" [COLOR=#FF0000]webkitallowfullscreen mozallowfullscreen allowfullscreen[/COLOR]></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" [COLOR=#FF0000]webkitallowfullscreen mozallowfullscreen allowfullscreen[/COLOR]></iframe> <vb:elseif condition="$provider == 'vimeo'" /> [COLOR=#FF0000]<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>[/COLOR] [COLOR=#A9A9A9]<vb:comment>[/COLOR] [COLOR=#A9A9A9]<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>[/COLOR] [COLOR=#A9A9A9]</vb:comment>[/COLOR] <vb:elseif condition="$provider == 'dailymotion'" /> [COLOR=#FF0000]<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>[/COLOR] [COLOR=#A9A9A9]<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>[/COLOR] <vb:elseif condition="$provider == 'metacafe'" /> [COLOR=#FF0000]<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>[/COLOR] [COLOR=#A9A9A9]<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>[/COLOR] <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" [COLOR=#FF0000]webkitallowfullscreen mozallowfullscreen allowfullscreen[/COLOR]></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" [COLOR=#FF0000]webkitallowfullscreen mozallowfullscreen allowfullscreen[/COLOR]></iframe> </vb:if>
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.
Comment