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: Average Rating - 5 Stars [COMMENTS CLOSED] Note: Pages are moderated.


5-Star Rating

Thanks for the tip it took two tries but it's working now. I don't understand why Facebook doesn't make these types of things easier to install.

PenPal [Jul. 23, 2019]


Newest Articles...
Inappropriate Photos
Kids Are Putting You, Themselves, and Their Future at Risk.
[Security] Sep-17-2019: Kids are prone to sharing photos, problem is some may be breaking the law, and you may be held liable.
Angry customer
Train Your Employees on How to Talk to Customers
[Business] Sep-16-2019: If you don't take care to train employees on how to treat customers with respect you are losing business and your reputation suffers.
Don't Play Doctor Online
Do Not Play Doctor Online You May Get More Than You Bargained For
[Online Shopping] Sep-10-2019: Be careful when purchasing medical or dental supplies online. Some products are not meant for consumers.
Business Cards
The Real Cost of Buying Business Cards Online
[Online Shopping] Sep-06-2019: The prices sound too good to be true, if you're willing to wait 2-3 weeks and avoid any additional charges you can save.
No Phishing No Spam
Email is Your Greatest Risk and You Cannot Live Without It
[Security] Sep-05-2019: Email is the weakest point in your enterprise or home environment and accounts for most malware.
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