Use Coldfusion to Deliver Video Based on Device

Competetive Marketing

Use Coldfusion to Deliver Video Based on Device

[Category: Programming]
Jun. 23, 2019

Coldfusion Code

If you happen to visit Robert Furst.com on a mobile device versus a desktop computer for the main page you will notice that the video is different for both. The same holds for all of the other pages on the site except, instead of the video the visitor is shown an image, to cut down on repeating the same video over and over. The image swapping out is done using HTML and CSS, however, in the case of video, that feature is no longer supported by CSS.

Our solution was taken from Adobe.com. However, the Adobe site had an error, leaving off "properties" from "cfclient.properties.width". I found the solution after multiple attempts with many forums claiming it to not be possible using Coldfusion alone.

    <cfclientsettings detectDevice=true />
    <cfclient>
   <cfif cfclient.width lte 480 >
    <!--Screen is less than or equal to 480 pixels do this -->
    <cfelseif cfclient.properties.width gte 480 AND cfclient.properties.width lte 760>
    <!--Screen is greater than 480 pixels but less than 760 pixel do this -->
    <cfelse>
    <!--Screen is larger than 760 pixel do this -->
    </cfif>
    </cfclient>

There is a limitation you need to be aware of; this is not like an image using CSS to deliver a custom image based on your screen size. In the case of CSS the image will change when you change the size of your browser or when you rotate your phone. Since this technique is checking the screen size on the page load, any change to the size of the screen or the orientation will not change the video. To view the differences you will need two view it on a desktop and a tablet/smartphone to see the different versions.

As for the HTML code for the video itself... Note you can leave off the title, alignment, controls, remove muting, turn autoplay off, and not let it loop. I left them in so that you don't have to go fishing for any of the most common settings.

    <video title="Title of the Movie" preload="auto" width="auto"   
    height ="auto" align="center" controls="controls" muted="muted" autoplay="autoplay" loop="loop">
    <source src="filename.mp4" type="video/mp4">
    <!--if the browser does not support video show this message-- >
    <p>Custom Message - Your browser does not support video.</p    >
    </video>
Share this page now!

Visitor Comments: [Comment] Note: Pages are moderated.


Currently there are no comments on this article.
Newest Articles...
Free stuff same price
Save when shopping online
[Online Shopping] Jul-19-2019: You can save nearly $200 on a $799 purchase but it's going to require research.
Angry former employee
Former Employees Posting Really Bad Reviews
[Web SEO] Jul-12-2019: Employees are fighting back when fired posting negative comments about their former employers.
Are you getting the best price
Thanks to the Internet You Are Paying More
[Online Shopping] Jul-09-2019: Amazon is not the cheapest and just because a website lists a price doesn't mean you have to pay that amount.
Criminals Stay Out
Adult Websites Are Too Risky
[Fraud] Jul-05-2019: Many people seek to hide their activities online and end up getting scammed.
Editing Content
No More Mr. Nice Guy
[Web SEO] Jun-30-2019: Allowing someone without training tell you how do do your job is not doing your job at all.
Additional Articles Continued...
Robert Furst Competitive Marketing • 22052 Las Brisas Circle • Boca Raton • Florida • 33433 (754) 307-4954
LinkedIn    Twitter    Messenger    Facebook    Pintrest    Alexa
©2019 -RF-. All rights reserved.   Privacy & Usage