How to add Fluid Player to Simple HTML5 Video Player in your website
Published: 2024-01-31 07:31:01

https://codexdindia.blogspot.com/2020/12/how-to-add-fluid-player-html5-video.html

{% youtube https://www.youtube.com/watch?v=bXuFyl3bskM&ab_channel=StubbornX %}

<p style="text-align: center;"><span style="font-size: large;">How to add Fluid Player HTML5 Video Player in your website</span></p><p style="text-align: center;"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/bXuFyl3bskM" vCPffh84kmpM width="560"></iframe></p><p>&nbsp;Here is the official Website :-&nbsp;<a href="https://www.fluidplayer.com/" rel="nofollow" target="_blank">https://www.fluidplayer.com/</a>&nbsp;</p><p><br /></p><p style="text-align: center;"><span style="font-size: large;">See Demo on Repl :-&nbsp;<a href="https://repl.it/@SH20RAJ/Fluidplayer#index.html">https://repl.it/@SH20RAJ/Fluidplayer#index.html</a></span></p><p style="text-align: center;"><br /></p><p style="text-align: center;">

  

    <div id="driveplyr143"></div>

    <script player="fluid" src="https://driveplyr.appspages.online/player.js" data-id="143" data-height="500px" data-width="100%" data-type="driveplyr" defer></script>

  


<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="360" src="https://fluidplayer.sh20raj.repl.co/" width="100%"></iframe>







</p><p style="text-align: center;"><br /></p><h3 style="text-align: left;">&nbsp;Style Your own Video Player Here :-&nbsp;<a href="https://www.fluidplayer.com/" rel="nofollow" target="_blank">fluidplayer</a></h3><p><br /></p><p>and <a href="https://docs.fluidplayer.com/docs/integration/quick-setup/" rel="nofollow" target="_blank">Documentation Here</a>.</p><p>A Sample Video Link :-&nbsp;<a href="https://bit.ly/bbsamplevideo">https://bit.ly/bbsamplevideo</a></p><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><p></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-bNA1Rch9o1g/X8n0hz8nu5I/AAAAAAAAATw/rGz_8hRtLN8gSqjkixIGpfwgSRv74gdCwCLcBGAsYHQ/s1366/Capture.JPG" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="627" data-original-width="1366" height="184" src="https://1.bp.blogspot.com/-bNA1Rch9o1g/X8n0hz8nu5I/AAAAAAAAATw/rGz_8hRtLN8gSqjkixIGpfwgSRv74gdCwCLcBGAsYHQ/w400-h184/Capture.JPG" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Use Custom JS maker for Designing Your Player</td></tr></tbody></table><br /><h2 style="text-align: center;"><br /></h2><h2 style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, roboto, oxygen-sans, ubuntu, cantarell, &quot;helvetica neue&quot;, arial, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;; font-size: 24px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 1.25; margin: 1.5em 0px 16px; padding: 0px; vertical-align: baseline;">Integration using CDN</h2><p style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, roboto, oxygen-sans, ubuntu, cantarell, &quot;helvetica neue&quot;, arial, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; vertical-align: baseline;">The Fluid Player provides a CDN build available for direct linking from&nbsp;<a href="https://cdn.fluidplayer.com/" style="border: 0px; box-sizing: border-box; color: #1a5e87; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;">https://cdn.fluidplayer.com</a>.</p><p style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, roboto, oxygen-sans, ubuntu, cantarell, &quot;helvetica neue&quot;, arial, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; vertical-align: baseline;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: 600; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">IMPORTANT:</span>&nbsp;As of v3.0.0, CDN version of Fluid Player ships with embedded CSS. Separate tag to include CSS is no longer required.</p><p style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, roboto, oxygen-sans, ubuntu, cantarell, &quot;helvetica neue&quot;, arial, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; vertical-align: baseline;">Automatically use the most recent version (recommended):</p><pre style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: inherit; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 16px; margin-top: 0px; padding: 0px; vertical-align: baseline;"><code class="hljs css language-html" style="background: rgb(240, 240, 240); border-radius: 3px; border: 0px; box-sizing: border-box; color: #444444; display: block; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-wrap: normal; overflow: auto visible; padding: 1.25rem 1.5rem; vertical-align: baseline; word-break: normal;"><span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">script</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">src</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"https://cdn.jsdelivr.net/gh/CDNSFree2/fluidplayer/fluidplayer.min.js"</span>&gt;</span><span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;/<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">script</span>&gt;</span></code></pre><p style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, roboto, oxygen-sans, ubuntu, cantarell, &quot;helvetica neue&quot;, arial, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; vertical-align: baseline;"><span style="font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit;">CDN integration example</span></p><pre style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: inherit; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 16px; margin-top: 0px; padding: 0px; vertical-align: baseline;"><code class="hljs css language-html" style="background: rgb(240, 240, 240); border-radius: 3px; border: 0px; box-sizing: border-box; color: #444444; display: block; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-wrap: normal; overflow: auto visible; padding: 1.25rem 1.5rem; vertical-align: baseline; word-break: normal;"><span class="hljs-comment" style="border: 0px; box-sizing: border-box; color: #888888; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;!-- Define a video with sources to attach Fluid Player to --&gt;</span>
<span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">video</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">id</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"example-player"</span>&gt;</span>
    <span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">source</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">src</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"video.mp4"</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">type</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"video/mp4"</span>/&gt;</span>
<span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;/<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">video</span>&gt;</span>

<span class="hljs-comment" style="border: 0px; box-sizing: border-box; color: #888888; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;!-- Place before &lt;/body&gt; tag --&gt;</span>
<span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">script</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">src</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"https://cdn.jsdelivr.net/gh/CDNSFree2/fluidplayer/fluidplayer.js"</span>&gt;</span><span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;/<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">script</span>&gt;</span>
<span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">script</span>&gt;</span><span class="actionscript" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
    <span class="hljs-comment" style="border: 0px; box-sizing: border-box; color: #888888; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">// fluidPlayer method is global when CDN distribution is used.</span>
    <span class="hljs-keyword" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">var</span> player = fluidPlayer(<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'example-player'</span>);
</span><span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;/<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">script</span>&gt;</span>
</code></pre><h2 style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, roboto, oxygen-sans, ubuntu, cantarell, &quot;helvetica neue&quot;, arial, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;; font-size: 24px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 1.25; margin: 1.5em 0px 16px; padding: 0px; vertical-align: baseline;"><a aria-hidden="true" class="anchor" id="quality-switching" style="border: 0px; box-sizing: border-box; color: inherit; display: block; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; top: -80px; vertical-align: baseline;"></a><a aria-hidden="true" class="hash-link" href="https://docs.fluidplayer.com/docs/integration/quick-setup/#quality-switching" style="border: 0px; box-sizing: border-box; color: #1a5e87; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1; margin: 0px 0px 0px -20px; opacity: 0; padding: 0px 4px 0px 0px; text-decoration-line: none; transition: opacity 0.3s ease 0s; vertical-align: baseline;"><svg aria-hidden="true" class="hash-link-icon" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" fill-rule="evenodd"></path></svg></a>Quality Switching</h2><p style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, roboto, oxygen-sans, ubuntu, cantarell, &quot;helvetica neue&quot;, arial, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; vertical-align: baseline;">Multiple sources can be added as shown below. The title will be displayed to the user when switching sources, and should be set to the video quality as can be seen below ('1080p', '720p' etc).</p><pre style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: inherit; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 16px; margin-top: 0px; padding: 0px; vertical-align: baseline;"><code class="hljs css language-html" style="background: rgb(240, 240, 240); border-radius: 3px; border: 0px; box-sizing: border-box; color: #444444; display: block; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-wrap: normal; overflow: auto visible; padding: 1.25rem 1.5rem; vertical-align: baseline; word-break: normal;"><span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">video</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">id</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'my-video'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">controls</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">style</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"width: 640px; height: 360px;"</span>&gt;</span>
    <span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">source</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">src</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'vid_1080p.mp4'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">title</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'1080p'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">type</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'video/mp4'</span> /&gt;</span>
    <span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">source</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">src</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'vid_720p.mp4'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">title</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'720p'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">type</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'video/mp4'</span> /&gt;</span>
    <span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">source</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">src</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'vid_480p.mp4'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">title</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'480p'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">type</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'video/mp4'</span> /&gt;</span>
<span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;/<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">video</span>&gt;</span>
</code></pre><p style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, roboto, oxygen-sans, ubuntu, cantarell, &quot;helvetica neue&quot;, arial, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; vertical-align: baseline;"><img alt="" src="https://docs.fluidplayer.com/img/docs/integration/qualitySwitch.png" style="border: 0px none; box-sizing: content-box; display: block; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px auto; max-width: 100%; padding: 0px; vertical-align: baseline;" /></p><h2 style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, roboto, oxygen-sans, ubuntu, cantarell, &quot;helvetica neue&quot;, arial, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;; font-size: 24px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 1.25; margin: 1.5em 0px 16px; padding: 0px; vertical-align: baseline;"><a aria-hidden="true" class="anchor" id="define-source-as-hd" style="border: 0px; box-sizing: border-box; color: inherit; display: block; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; top: -80px; vertical-align: baseline;"></a><a aria-hidden="true" class="hash-link" href="https://docs.fluidplayer.com/docs/integration/quick-setup/#define-source-as-hd" style="border: 0px; box-sizing: border-box; color: #1a5e87; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1; margin: 0px 0px 0px -20px; opacity: 0; padding: 0px 4px 0px 0px; text-decoration-line: none; transition: opacity 0.3s ease 0s; vertical-align: baseline;"><svg aria-hidden="true" class="hash-link-icon" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" fill-rule="evenodd"></path></svg></a>Define Source as HD</h2><p style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, roboto, oxygen-sans, ubuntu, cantarell, &quot;helvetica neue&quot;, arial, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; vertical-align: baseline;">The sources set for&nbsp;<a href="https://docs.fluidplayer.com/docs/integration/quick-setup/#quality-switching" style="border: 0px; box-sizing: border-box; color: #1a5e87; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;">quality switching</a>&nbsp;can be defined as HD by adding a&nbsp;<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: 600; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">data-fluid-hd</span>&nbsp;attribute to the&nbsp;<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: 600; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><source style="box-sizing: border-box;"></source></span>tag. The colour of this text will match the&nbsp;<a href="https://docs.fluidplayer.com/docs/configuration/layout/#primarycolor" style="border: 0px; box-sizing: border-box; color: #1a5e87; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;">primary color</a>. If you wish to override this colour you can do so using custom CSS on your own page. The class responsible for the colour is&nbsp;<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: 600; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">fp_hd_source</span>. An example of overriding this colour is shown below.</p><pre style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: inherit; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 16px; margin-top: 0px; padding: 0px; vertical-align: baseline;"><code class="hljs css language-css" style="background: rgb(240, 240, 240); border-radius: 3px; border: 0px; box-sizing: border-box; color: #444444; display: block; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-wrap: normal; overflow: auto visible; padding: 1.25rem 1.5rem; vertical-align: baseline; word-break: normal;"><span class="hljs-selector-class" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.fp_hd_source</span> { <span class="hljs-attribute" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">color</span>: yellow <span class="hljs-meta" style="border: 0px; box-sizing: border-box; color: #1f7199; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">!important</span>; }
</code></pre><p style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, roboto, oxygen-sans, ubuntu, cantarell, &quot;helvetica neue&quot;, arial, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; vertical-align: baseline;">An example of how the HD is set in the sources is show below.</p><pre style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: inherit; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 16px; margin-top: 0px; padding: 0px; vertical-align: baseline;"><code class="hljs css language-html" style="background: rgb(240, 240, 240); border-radius: 3px; border: 0px; box-sizing: border-box; color: #444444; display: block; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-wrap: normal; overflow: auto visible; padding: 1.25rem 1.5rem; vertical-align: baseline; word-break: normal;"><span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">video</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">id</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'my-video'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">controls</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">style</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"width: 640px; height: 360px;"</span>&gt;</span>
    <span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">source</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">data-fluid-hd</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">src</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'vid_1080p.mp4'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">title</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'1080p'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">type</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'video/mp4'</span> /&gt;</span>
    <span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">source</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">data-fluid-hd</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">src</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'vid_720p.mp4'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">title</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'720p'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">type</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'video/mp4'</span> /&gt;</span>
    <span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">source</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">src</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'vid_480p.mp4'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">title</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'480p'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">type</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'video/mp4'</span> /&gt;</span>
<span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;/<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">video</span>&gt;</span>
</code></pre><p style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, roboto, oxygen-sans, ubuntu, cantarell, &quot;helvetica neue&quot;, arial, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; vertical-align: baseline;"><img alt="" src="https://docs.fluidplayer.com/img/docs/integration/hdSource.png" style="border: 0px none; box-sizing: content-box; display: block; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px auto; max-width: 100%; padding: 0px; vertical-align: baseline;" /></p><h2 style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, roboto, oxygen-sans, ubuntu, cantarell, &quot;helvetica neue&quot;, arial, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;; font-size: 24px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 1.25; margin: 1.5em 0px 16px; padding: 0px; vertical-align: baseline;"><a aria-hidden="true" class="anchor" id="setting-additional-options" style="border: 0px; box-sizing: border-box; color: inherit; display: block; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; top: -80px; vertical-align: baseline;"></a><a aria-hidden="true" class="hash-link" href="https://docs.fluidplayer.com/docs/integration/quick-setup/#setting-additional-options" style="border: 0px; box-sizing: border-box; color: #1a5e87; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1; margin: 0px 0px 0px -20px; opacity: 0; padding: 0px 4px 0px 0px; text-decoration-line: none; transition: opacity 0.3s ease 0s; vertical-align: baseline;"><svg aria-hidden="true" class="hash-link-icon" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" fill-rule="evenodd"></path></svg></a>Setting additional options</h2><p style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, roboto, oxygen-sans, ubuntu, cantarell, &quot;helvetica neue&quot;, arial, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px 0px 1em; padding: 0px; vertical-align: baseline;">Fluid Player can be customized by setting some optional parameters. The full list of parameters can be found under&nbsp;<a href="https://docs.fluidplayer.com/docs/configuration/layout/" style="border: 0px; box-sizing: border-box; color: #1a5e87; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;">Configuration</a></p><pre style="background-color: white; border: 0px; box-sizing: border-box; color: #24292e; font-family: inherit; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 16px; margin-top: 0px; padding: 0px; vertical-align: baseline;"><code class="hljs css language-html" style="background: rgb(240, 240, 240); border-radius: 3px; border: 0px; box-sizing: border-box; color: #444444; display: block; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; overflow-wrap: normal; overflow: auto visible; padding: 1.25rem 1.5rem; vertical-align: baseline; word-break: normal;"><span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">video</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">id</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'my-video'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">controls</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">style</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"width: 640px; height: 360px;"</span>&gt;</span>
    <span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">source</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">src</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'vid.mp4'</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">type</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'video/mp4'</span> /&gt;</span>
<span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;/<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">video</span>&gt;</span>

<span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">script</span> <span class="hljs-attr" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">type</span>=<span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"text/javascript"</span>&gt;</span><span class="actionscript" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
<span class="hljs-keyword" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">var</span> player = fluidPlayer(
   <span class="hljs-string" style="border: 0px; box-sizing: border-box; color: #880000; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'my-video'</span>,
    {
        layoutControls: {
            <span class="hljs-comment" style="border: 0px; box-sizing: border-box; color: #888888; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">// Parameters to customise the look and feel of the player</span>
        },
        vastOptions: {
            <span class="hljs-comment" style="border: 0px; box-sizing: border-box; color: #888888; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">// Parameters to customise how the ads are displayed &amp; behave</span>
        }
    }
);
</span><span class="hljs-tag" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;/<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 13.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">script</span>&gt;</span></code></pre>Note :- Use Script cdn before Video Tag .<div><br /></div><div><br /></div><div><br /></div><div>Chats During Video Making :-&nbsp;</div><div><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"><br /><div>&nbsp;&nbsp;&nbsp;&nbsp;Let's&nbsp;add&nbsp;fluid&nbsp;player&nbsp;to&nbsp;a&nbsp;simple&nbsp;html5&nbsp;video&nbsp;player&nbsp;..</div><div>&nbsp;&nbsp;&nbsp;&nbsp;Let's&nbsp;Design&nbsp;......</div><div>&nbsp;&nbsp;&nbsp;&nbsp;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;How&nbsp;to&nbsp;add&nbsp;VR&nbsp;and&nbsp;VPAID&nbsp;ads&nbsp;in&nbsp;next&nbsp;video&nbsp;.........</div><div>&nbsp;&nbsp;&nbsp;&nbsp;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;Fluid&nbsp;Player&nbsp;not&nbsp;added&nbsp;because&nbsp;of&nbsp;a&nbsp;common&nbsp;mistake&nbsp;....</div><div>&nbsp;&nbsp;&nbsp;&nbsp;Once&nbsp;More&nbsp;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;See&nbsp;here&nbsp;:-&nbsp;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;Mistake&nbsp;=&nbsp;add&nbsp;)&nbsp;in&nbsp;last&nbsp;Here...</div><div>&nbsp;&nbsp;&nbsp;&nbsp;This&nbsp;is&nbsp;a&nbsp;mistake&nbsp;..........</div><div>&nbsp;&nbsp;&nbsp;&nbsp;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;Quality&nbsp;Switching&nbsp;...</div><div>&nbsp;&nbsp;&nbsp;&nbsp;Attach&nbsp;diffrent&nbsp;quality&nbsp;videos&nbsp;with&nbsp;title&nbsp;attribute&nbsp;..........</div><div>&nbsp;&nbsp;&nbsp;&nbsp;Let's&nbsp;see&nbsp;.....</div><br /></div></div>