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...
Digital Signs - Yard Sign
Wide Format Printing for Everyday Use
[Advertising] Mar-17-2020: "flags" with poles, mounted canvas, table covers, car magnets, car wraps, aluminum signs, yard signs, "A-frame" sidewalk signs, and acrylic signs.
Signs
Signs, They are Everywhere
[Advertising] Feb-11-2020: Signs are on walls, doors, windows, floors, lawns, they're everywhere...
Miami Streets flooded
Is Miami Beach Becoming Too Expensive to Insure
[Business] Jan-28-2020: Can insurance companies continue to insure what is an increasingly expensive risky venture, real estate in Miami Beach.
Fake Ads
Are Ads No Longer Reasonable for the Sane Person
[Shopping] Dec-27-2019: Today's ads are so out there it's getting really difficult to believe anything.
Focus on sales not solutions
Amazon is Too Busy Pushing Sponsors to Give Good Results
[Shopping] Dec-09-2019: Instead of focusing on better search results there is a focus on pushing Sponsored vendors.
Additional Articles Continued...
Robert Furst Competitive Marketing • 22052 Las Brisas Circle • Boca Raton • Florida • 33433 (754) 307-4954
LinkedIn    Twitter    Messenger    Facebook    Pintrest
©2020 -
RF-. All rights reserved.   Privacy & Usage