Site Pages > Embed Videos in HTML Widgets

Site Pages > Embed Videos in HTML Widgets

For our help page (site-level), we like to use the bootstrap accordion as part of an HTML widget to keep the content compressed and are now planning on adding some video tutorials. Is there a recommended way to embed Brightcove-hosted videos in an HTML widget so that we can continue to use the accordion functionality?

Unfortunately the embed code provided by Brigthcove (sample below) is not mobile-friendly.

<object id="flashObj" width="480" height="270" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,47,0"><param name="movie" value="http://c.brightcove.com/services/viewer/federated_f9?isVid=1&isUI=1" /><param name="bgcolor" value="#FFFFFF" /><param name="flashVars" value="videoId=3237590535001&playerID=1235740926001&playerKey=AQ~~,AAABHwsi7CE~,O-fBsmCqgjci_ST7_7etjZBGC89FCssr&domain=embed&dynamicStreaming=true" /><param name="base" value="http://admin.brightcove.com" /><param name="seamlesstabbing" value="false" /><param name="allowFullScreen" value="true" /><param name="swLiveConnect" value="true" /><param name="allowScriptAccess" value="always" /><embed src="http://c.brightcove.com/services/viewer/federated_f9?isVid=1&isUI=1" bgcolor="#FFFFFF" flashVars="videoId=3237590535001&playerID=1235740926001&playerKey=AQ~~,AAABHwsi7CE~,O-fBsmCqgjci_ST7_7etjZBGC89FCssr&domain=embed&dynamicStreaming=true" base="http://admin.brightcove.com" name="flashObj" width="480" height="270" seamlesstabbing="false" type="application/x-shockwave-flash" allowFullScreen="true" allowScriptAccess="always" swLiveConnect="true" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed></object>

I also tried copying the code generated by the video widget into the HTML editor, which showed some promise, but the editor overwrites and modifies some of the code when saving. The code revision prevents it from playing on mobile devices.

Original Code (from video widget)

<div class="videoContainer print-hidden" style="margin:4px 0;" data-video-max-width="" data-video-id="bc_a8098ff2-6901-4026-9a4e-9fbefa7d6e00">
            <object id="bc_a8098ff2-6901-4026-9a4e-9fbefa7d6e00" wmode="opaque" class="BrightcoveExperience">
                <param name="bgcolor" value="#FFFFFF" />
                <param name="isVid" value="true" />
                <param name="isUI" value="true" />
                <param name="dynamicStreaming" value="true" />
                <param name="htmlFallback" value="true" />
                <param name="width" value="100%" />
                <param name="playerID" value="3866869069001" />
                <param name="playerKey" value="AQ~~,AAABHwsi7CE~,O-fBsmCqgjeAYaW5GRfpwWuiy2JBi1ya" />
                <param name="templateLoadHandler" value="onTemplateLoaded" />
                <param name="&#64;videoPlayer" value="3237590535001" />  
                <param name="wmode" value="opaque">
                <param name="includeAPI" value="true" />
                <param name="forceHTML5" value="true" />
            </object>

</div>

<script type="text/javascript">
    $(function () {
        //activates the video control whenever page is loaded
        brightcove.createExperiences();
    });
</script>

Revised (after saving HTML widget)

<div class="videoContainer print-hidden" style="margin: 4px 0px; height: 228.375px;" data-video-max-width="" data-video-id="bc_a8098ff2-6901-4026-9a4e-9fbefa7d6e00"><object type="application/x-shockwave-flash" data="http://c.brightcove.com/services/viewer/federated_f9?&amp;width=100%25&amp;height=100%25&amp;flashID=bc_a8098ff2-6901-4026-9a4e-9fbefa7d6e00&amp;bgcolor=%23FFFFFF&amp;isVid=true&amp;isUI=true&amp;dynamicStreaming=true&amp;htmlFallback=true&amp;playerID=3866869069001&amp;playerKey=AQ~~%2CAAABHwsi7CE~%2CO-fBsmCqgjeAYaW5GRfpwWuiy2JBi1ya&amp;templateLoadHandler=onTemplateLoaded&amp;%40videoPlayer=3237590535001&amp;wmode=opaque&amp;includeAPI=true&amp;forceHTML5=true&amp;autoStart=&amp;debuggerID=&amp;startTime=1451489595766" id="bc_a8098ff2-6901-4026-9a4e-9fbefa7d6e00" width="100%" height="100%" class="BrightcoveExperience" seamlesstabbing="undefined" title="Adobe Flash Player"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="seamlessTabbing" value="false" /><param name="swliveconnect" value="true" /><param name="wmode" value="opaque" /><param name="quality" value="high" /><param name="bgcolor" value="#FFFFFF" /></object></div>
<script>// <![CDATA[
$(function () {
        //activates the video control whenever page is loaded
        brightcove.createExperiences();
    });
// ]]></script>

I finally tried using the "share video" link provided by Brightcove (sample) within an iframe, which came the closest and at least plays from a mobile device, but this causes some sizing issues.

Any suggestions?