diff --git a/docs/aspect-ratio-crop.html b/docs/aspect-ratio-crop.html
index 485bb08ad..eef2e683a 100644
--- a/docs/aspect-ratio-crop.html
+++ b/docs/aspect-ratio-crop.html
@@ -17,23 +17,28 @@
 
   <script type="text/javascript">
     window.addEventListener('load', function(){
-      var player1 = cloudinary.videoPlayer('player-1', { cloudName: 'demo' });
-      player1.source({
+      var player1 = cloudinary.videoPlayer('player-1', { 
+        cloudName: 'demo',
         publicId: 'sea_turtle',
         aspectRatio: '1:1',
-        cropMode: 'fill'
+        cropMode: 'fill',
+        breakpoints: true,
+        transformation: [
+          { effect: 'blur:500' },
+          { effect: 'saturation:-100' }
+        ]
       });
 
-      var player2 = cloudinary.videoPlayer('player-2', { cloudName: 'demo' });
-      player2.source({
+      var player2 = cloudinary.videoPlayer('player-2', { 
+        cloudName: 'demo',
         publicId: 'sea_turtle',
         aspectRatio: '4:3',
         cropMode: 'pad',
         cropPadColor: 'blue'
       });
 
-      var player3 = cloudinary.videoPlayer('player-3', { cloudName: 'demo' });
-      player3.source({
+      var player3 = cloudinary.videoPlayer('player-3', { 
+        cloudName: 'demo',
         publicId: 'sea_turtle',
         aspectRatio: '9:16',
         cropMode: 'smart'
@@ -55,8 +60,6 @@ <h4 class="mb-2">fill - crops to fit aspect ratio</h4>
       id="player-1"
       playsinline
       controls
-      muted
-      autoplay
       class="cld-video-player"
       width="500">
     </video>
@@ -66,8 +69,6 @@ <h4 class="mt-4 mb-2">pad - letterboxes to fit</h4>
       id="player-2"
       playsinline
       controls
-      muted
-      autoplay
       class="cld-video-player"
       width="500">
     </video>
@@ -77,8 +78,6 @@ <h4 class="mt-4 mb-2">smart with 9:16 (portrait)</h4>
       id="player-3"
       playsinline
       controls
-      muted
-      autoplay
       class="cld-video-player"
       width="280">
     </video>
diff --git a/docs/breakpoints.html b/docs/breakpoints.html
index f186b5bc3..7616310ad 100644
--- a/docs/breakpoints.html
+++ b/docs/breakpoints.html
@@ -2,19 +2,29 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Breakpoints - Cloudinary Video Player</title>
+  <title>Cloudinary Video Player</title>
   <link href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32/v1597183771/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png" rel="icon" type="image/png">
 
   <!-- Bootstrap -->
   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
-  <script type="text/javascript" src="scripts.js"></script>
+  <!-- highlight.js -->
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+  <script>hljs.initHighlightingOnLoad();</script>
+
+  <!--
+    We're loading scripts & style dynamically for development/testing.
+    Real-world usage would look like this:
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.js"></script>
+
+  -->
+
+  <script type="text/javascript" src="./scripts.js"></script>
 
   <style>
-    .player-container {
-      margin-bottom: 30px;
-    }
     .video-url {
       margin-top: 15px;
       padding: 10px;
@@ -28,7 +38,7 @@
 
   <script type="text/javascript">
     window.addEventListener('load', function(){
-      
+
       const player = cloudinary.videoPlayer('player-with-breakpoints', {
         cloudName: 'demo',
         breakpoints: true,
@@ -36,15 +46,13 @@
       });
       player.source('sea_turtle');
 
-      // Display video URL using multiple methods
       function updateVideoUrl() {
-        // Try getting from video element
-        const videoElement = player.videojs?.el()?.querySelector('video') || 
+        const videoElement = player.videojs?.el()?.querySelector('video') ||
                            document.querySelector('#player-with-breakpoints video') ||
                            document.querySelector('.vjs-tech');
-        
+
         const src = videoElement?.currentSrc || videoElement?.src || '';
-        
+
         if (src) {
           document.getElementById('video-url').textContent = src;
           return true;
@@ -52,7 +60,6 @@
         return false;
       }
 
-      // Update URL when video source is loaded
       player.on('loadedmetadata', updateVideoUrl);
 
     }, false);
@@ -60,53 +67,69 @@
 
 </head>
 <body>
+  <div class="container p-4 col-12 col-md-9 col-xl-6">
+    <nav class="nav mb-2">
+      <a href="./index.html">&#60;&#60; Back to examples index</a>
+    </nav>
+    <h1>Cloudinary Video Player</h1>
+    <h3 class="mb-4">Breakpoints - Responsive Video Resolution</h3>
 
-  <div class="container p-4">
-    <h1 class="mb-4">Breakpoints - Responsive Video Resolution</h1>
-    
-    <p class="lead">
+    <p class="mb-4">
       Breakpoints automatically select the optimal video resolution based on container width and device pixel ratio (DPR).
+      Container width is rounded to the nearest rendition [640, 1280, 1920, 3840] and Cloudinary handles DPR scaling.
+    </p>
+
+    <video
+      id="player-with-breakpoints"
+      playsinline
+      controls
+      muted
+      autoplay
+      class="cld-video-player cld-video-player-skin-dark cld-fluid"
+      width="500"
+    ></video>
+
+    <div class="video-url">
+      <strong>Video URL:</strong><br>
+      <span id="video-url">Loading...</span>
+    </div>
+
+    <p class="mt-4">
+      <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
     </p>
 
-    <div class="player-container">
-      <h3>Breakpoints Example (DPR 2.0)</h3>
-      <p>The player automatically rounds container width to the nearest rendition [640, 1280, 1920, 3840] and lets Cloudinary handle DPR scaling.</p>
-      
-      <video
-        id="player-with-breakpoints"
-        controls
-        muted
-        class="cld-video-player cld-video-player-skin-dark cld-fluid">
-      </video>
-      
-      <div class="video-url mt-3">
-        <strong>Video URL:</strong><br>
-        <span id="video-url">Loading...</span>
-      </div>
-      
-      <details class="mt-3">
-        <summary><strong>View Code</strong></summary>
-        <pre><code>const player = cloudinary.videoPlayer('player', {
+    <h3 class="mt-4">Example Code:</h3>
+    <pre>
+      <code class="language-html">
+&lt;video
+  id="player"
+  controls
+  muted
+  autoplay
+  class="cld-video-player cld-fluid"
+  width="500"
+&gt;&lt;/video&gt;
+      </code>
+      <code class="language-javascript">
+
+// Initialize player with breakpoints
+const player = cloudinary.videoPlayer('player', {
   cloudName: 'demo',
   breakpoints: true,
   maxDpr: 2.0
 });
 
-player.source('sea_turtle');</code></pre>
-      </details>
-    </div>
+// Load source
+player.source('sea_turtle');
+      </code>
+    </pre>
 
-    <h3 class="mt-5">Configuration Options</h3>
+    <h3 class="mt-4">Configuration Options</h3>
     <ul>
       <li><code>breakpoints</code> (boolean): Enable/disable breakpoints</li>
       <li><code>dpr</code> (number): Device pixel ratio - 1.0, 1.5, or 2.0 (default: 2.0)</li>
       <li><strong>Renditions:</strong> [640, 1280, 1920, 3840] - Container width is rounded to nearest value</li>
     </ul>
-
-    <p class="mt-4">
-      <a href="./index.html">← Back to Examples</a>
-    </p>
-
   </div>
 
 </body>
diff --git a/docs/es-modules/breakpoints.html b/docs/es-modules/breakpoints.html
index ced5fe807..d71eb4537 100644
--- a/docs/es-modules/breakpoints.html
+++ b/docs/es-modules/breakpoints.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Breakpoints - Cloudinary Video Player</title>
+    <title>Cloudinary Video Player</title>
     <link
       href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32,e_hue:290/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png"
       rel="icon"
@@ -11,9 +11,6 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <style>
-      .player-container {
-        margin-bottom: 30px;
-      }
       .video-url {
         margin-top: 15px;
         padding: 10px;
@@ -38,34 +35,33 @@ <h3 class="mb-4">Breakpoints - Responsive Video Resolution</h3>
         Container width is rounded to the nearest rendition [640, 1280, 1920, 3840] and Cloudinary handles DPR scaling.
       </p>
 
-      <div class="player-container">
-        <h4 class="mt-4">Breakpoints Example (DPR 2.0)</h4>
-        <video
-          id="player-with-breakpoints"
-          class="cld-video-player"
-          controls
-          muted
-          width="500"
-        ></video>
+      <video
+        id="player-with-breakpoints"
+        class="cld-video-player cld-fluid"
+        crossorigin="anonymous"
+        controls
+        muted
+        playsinline
+        width="500"
+      ></video>
 
-        <div class="video-url">
-          <strong>Video URL:</strong><br>
-          <span id="video-url">Loading...</span>
-        </div>
+      <div class="video-url">
+        <strong>Video URL:</strong><br>
+        <span id="video-url">Loading...</span>
       </div>
 
-      <h4 class="mt-4">Configuration</h4>
-      <ul>
-        <li><code>breakpoints</code> (boolean): Enable/disable breakpoints</li>
-        <li><code>dpr</code> (number): Device pixel ratio - 1.0, 1.5, or 2.0 (default: 2.0)</li>
-        <li><strong>Renditions:</strong> [640, 1280, 1920, 3840]</li>
-      </ul>
-
       <p class="mt-4">
         <a href="https://cloudinary.com/documentation/cloudinary_video_player"
           >Full documentation</a
         >
       </p>
+
+      <h3 class="mt-4">Configuration Options</h3>
+      <ul>
+        <li><code>breakpoints</code> (boolean): Enable/disable breakpoints</li>
+        <li><code>dpr</code> (number): Device pixel ratio - 1.0, 1.5, or 2.0 (default: 2.0)</li>
+        <li><strong>Renditions:</strong> [640, 1280, 1920, 3840] - Container width is rounded to nearest value</li>
+      </ul>
     </div>
 
     <script type="module">
@@ -79,15 +75,13 @@ <h4 class="mt-4">Configuration</h4>
       });
       player.source('sea_turtle');
 
-      // Display video URL using multiple methods
       function updateVideoUrl() {
-        // Try getting from video element
-        const videoElement = player.videojs?.el()?.querySelector('video') || 
+        const videoElement = player.videojs?.el()?.querySelector('video') ||
                            document.querySelector('#player-with-breakpoints video') ||
                            document.querySelector('.vjs-tech');
-        
+
         const src = videoElement?.currentSrc || videoElement?.src || '';
-        
+
         if (src) {
           document.getElementById('video-url').textContent = src;
           return true;
@@ -95,7 +89,6 @@ <h4 class="mt-4">Configuration</h4>
         return false;
       }
 
-      // Update URL when video source is loaded
       player.on('loadedmetadata', updateVideoUrl);
     </script>
 
diff --git a/src/components/error-display/error-display.js b/src/components/error-display/error-display.js
new file mode 100644
index 000000000..c78160f3e
--- /dev/null
+++ b/src/components/error-display/error-display.js
@@ -0,0 +1,31 @@
+import videojs from 'video.js';
+import { PLAYER_EVENT } from 'utils/consts';
+
+const ErrorDisplay = videojs.getComponent('ErrorDisplay');
+
+class CldErrorDisplay extends ErrorDisplay {
+  content() {
+    const error = this.player().error();
+    if (!error) return '';
+
+    const wrapper = videojs.dom.createEl('div', { className: 'cld-error-display-content' });
+    const msg = videojs.dom.createEl('span', { className: 'cld-error-message' });
+    if (error.isHtml) {
+      msg.innerHTML = this.localize(error.message);
+    } else {
+      msg.textContent = this.localize(error.message);
+    }
+    wrapper.appendChild(msg);
+
+    const refreshLink = msg.querySelector('.cld-error-refresh');
+    if (refreshLink) {
+      refreshLink.onclick = (e) => {
+        e.preventDefault();
+        this.player().trigger(PLAYER_EVENT.REFRESH);
+      };
+    }
+    return wrapper;
+  }
+}
+
+export default CldErrorDisplay;
diff --git a/src/components/index.js b/src/components/index.js
index 9e4e23181..4d7b07281 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,5 @@
+import videojs from 'video.js';
+import CldErrorDisplay from './error-display/error-display';
 import JumpForwardButton from './jumpButtons/jump-10-plus';
 import JumpBackButton from './jumpButtons/jump-10-minus';
 import LogoButton from './logoButton/logo-button';
@@ -6,7 +8,10 @@ import TitleBar from './title-bar/title-bar';
 import SourceSwitcherButton from './source-switcher-button/source-switcher-button';
 import BigPauseButton from './bigPauseButton/big-pause-button';
 
+videojs.registerComponent('ErrorDisplay', CldErrorDisplay);
+
 export {
+  CldErrorDisplay,
   JumpForwardButton,
   JumpBackButton,
   LogoButton,
diff --git a/src/plugins/cloudinary/common.js b/src/plugins/cloudinary/common.js
index 102b4b502..2e23a69fa 100644
--- a/src/plugins/cloudinary/common.js
+++ b/src/plugins/cloudinary/common.js
@@ -80,6 +80,25 @@ const mergeTransformations = (initTransformation1, transformation2) => {
   return new Transformation(transformation1).fromOptions(transformation2).toOptions();
 };
 
+// Video-only transformation keys invalid for static images (e.g. poster, sprite)
+export const VIDEO_ONLY_TRANSFORMATION_KEYS = ['streaming_profile', 'video_codec'];
+
+const filterTxArray = (arr) =>
+  arr.map((t) => omit(t, VIDEO_ONLY_TRANSFORMATION_KEYS)).filter((t) => Object.keys(t).length > 0);
+
+export const omitVideoOnlyTransformations = (transformation) => {
+  if (!transformation || typeof transformation !== 'object') return transformation;
+  if (Array.isArray(transformation)) {
+    return filterTxArray(transformation);
+  }
+  if (Array.isArray(transformation?.transformation)) {
+    const result = omit(transformation, VIDEO_ONLY_TRANSFORMATION_KEYS);
+    result.transformation = filterTxArray(transformation.transformation);
+    return result;
+  }
+  return omit(transformation, VIDEO_ONLY_TRANSFORMATION_KEYS);
+};
+
 const ERROR_CODE = {
   NO_SUPPORTED_MEDIA: 6,
   CUSTOM: 10,
@@ -113,6 +132,10 @@ const cloudinaryErrorsConverter = ({ errorMsg, publicId, cloudName, statusCode }
     error.message = `${msg} Requires authentication`;
     error.code = ERROR_CODE.UNAUTHENTICATED;
   }
+  if (statusCode === 423) {
+    error.message = 'Video is being processed. <br><a href="#" class="cld-error-refresh">Try again</a> in a moment.';
+    error.isHtml = true;
+  }
   return error;
 };
 
diff --git a/src/plugins/cloudinary/index.js b/src/plugins/cloudinary/index.js
index faa02ef03..4ba965148 100644
--- a/src/plugins/cloudinary/index.js
+++ b/src/plugins/cloudinary/index.js
@@ -6,6 +6,7 @@ import { isKeyInTransformation } from 'utils/cloudinary';
 import {
   normalizeOptions,
   mergeTransformations,
+  omitVideoOnlyTransformations,
   extendCloudinaryConfig,
   setupCloudinaryMiddleware,
   isRawUrl
@@ -18,8 +19,12 @@ import { DEFAULT_DPR, RENDITIONS } from './models/video-source/video-source.cons
 
 import recommendationsOverlay from 'components/recommendations-overlay';
 
-export const getEffectiveDpr = (maxDpr, deviceDpr) =>
-  Math.min(maxDpr ?? DEFAULT_DPR, deviceDpr ?? DEFAULT_DPR, DEFAULT_DPR);
+export const getEffectiveDpr = (maxDpr) => {
+  const deviceDpr = typeof window !== 'undefined' && window.devicePixelRatio != null
+    ? window.devicePixelRatio
+    : DEFAULT_DPR;
+  return Math.min(maxDpr ?? DEFAULT_DPR, deviceDpr, DEFAULT_DPR);
+};
 
 const DEFAULT_PARAMS = {
   transformation: {},
@@ -32,8 +37,8 @@ export const CONSTRUCTOR_PARAMS = ['cloudinaryConfig', 'transformation',
   'sourceTypes', 'sourceTransformation', 'posterOptions', 'autoShowRecommendations'];
 
 const normalizeAspectCrop = (options) => {
-  const { aspectRatio, cropMode, cropPadColor, transformation, ...rest } = options;
-  if (!aspectRatio && !cropMode) return options;
+  const { aspectRatio, cropMode, cropPadColor, transformation, breakpointTransformation, ...rest } = options;
+  if (!aspectRatio && !cropMode && !breakpointTransformation) return options;
 
   const tx = {};
   if (aspectRatio) tx.aspect_ratio = aspectRatio;
@@ -46,11 +51,12 @@ const normalizeAspectCrop = (options) => {
       if (cropMode === CROP_MODE.PAD && cropPadColor) tx.background = cropPadColor;
     }
   }
+  const mergedTx = { ...(breakpointTransformation || {}), ...tx };
   return {
     ...rest,
     transformation: Array.isArray(transformation)
-      ? [tx, ...transformation]
-      : mergeTransformations(transformation || {}, tx)
+      ? [...transformation, mergedTx]
+      : mergeTransformations(transformation || {}, mergedTx)
   };
 };
 
@@ -148,6 +154,20 @@ class CloudinaryContext {
     this.buildSource = (publicId, options = {}) => {
       let builtSrc = null;
       ({ publicId, options } = normalizeOptions(publicId, options));
+
+      // Calculate breakpoint transformation.
+      // This should happen before normalizeAspectCrop so they can be merged.
+      if (options.breakpoints && this.player) {
+        const playerEl = this.player.el();
+        const playerWidth = playerEl?.clientWidth;
+        const dpr = getEffectiveDpr(options.maxDpr);
+        const requiredWidth = playerWidth * dpr;
+        const width = RENDITIONS.find(rendition => rendition >= requiredWidth) || RENDITIONS[RENDITIONS.length - 1];
+        options.breakpointTransformation = {
+          width,
+          ...(!isKeyInTransformation(options.transformation, 'crop') && { crop: 'limit' })
+        };
+      }
       options = normalizeAspectCrop(options);
 
       options.cloudinaryConfig = extendCloudinaryConfig(this.cloudinaryConfig(), options.cloudinaryConfig || {});
@@ -155,8 +175,20 @@ class CloudinaryContext {
       options.sourceTransformation = options.sourceTransformation || this.sourceTransformation();
       options.sourceTypes = options.sourceTypes || this.sourceTypes();      
 
-      const posterOptions = posterOptionsForCurrent();
-      
+      const posterOptions = posterOptionsForCurrent(options);
+
+      // Inherit source transformation
+      const srcTx = options.transformation;
+      if (srcTx && !isEmpty(srcTx)) {
+        const imageSafeTx = omitVideoOnlyTransformations(srcTx);
+        const merged = mergeTransformations(posterOptions.transformation || {}, imageSafeTx);
+        // Remove height when aspect_ratio is set
+        if (merged.aspect_ratio) {
+          delete merged.height;
+        }
+        posterOptions.transformation = merged;
+      }
+
       const hasUserPosterOptions = !isEmpty(options.posterOptions);
       
       if (options.poster === undefined) {
@@ -175,21 +207,6 @@ class CloudinaryContext {
         { hasUserPosterOptions: hasUserPosterOptions || null }
       );
 
-      // Calculate breakpoint transformation: requiredWidth = playerWidth * effectiveDpr, then closest breakpoint as width (no dpr in transformation).
-      if (options.breakpoints) {
-        const playerEl = this.player.el();
-        const playerWidth = playerEl?.clientWidth;
-        const win = playerEl?.ownerDocument?.defaultView;
-        const deviceDpr = win?.devicePixelRatio ?? DEFAULT_DPR;
-        const dpr = getEffectiveDpr(options.maxDpr, deviceDpr);
-        const requiredWidth = playerWidth * dpr;
-        const width = RENDITIONS.find(rendition => rendition >= requiredWidth) || RENDITIONS[RENDITIONS.length - 1];
-        options.breakpointTransformation = {
-          width,
-          ...(!isKeyInTransformation(options.transformation, 'crop') && { crop: 'limit' })
-        };
-      }
-
       options.queryParams = Object.assign(options.queryParams || {}, options.allowUsageReport ? { _s: `vp-${VERSION}` } : {});
 
       if (options.sourceTypes.indexOf('audio') > -1) {
@@ -379,29 +396,34 @@ class CloudinaryContext {
       return v.canPlayType(codec) || 'MediaSource' in window && MediaSource.isTypeSupported(codec);
     };
 
-    const posterOptionsForCurrent = () => {
-      const opts = Object.assign({}, this.posterOptions());
-
-      opts.transformation = opts.transformation || {};
+    const posterOptionsForCurrent = (sourceOpts) => {
+      const posterOpts = Object.assign({}, this.posterOptions());
+      posterOpts.transformation = posterOpts.transformation || {};
 
-      if ((opts.transformation.width || opts.transformation.height) && !opts.transformation.crop) {
-        opts.transformation.crop = 'scale';
+      if ((posterOpts.transformation.width || posterOpts.transformation.height) && !posterOpts.transformation.crop) {
+        posterOpts.transformation.crop = 'scale';
       }
 
-      // Set poster dimensions to player actual size.
-      // (unless they were explicitly set via `posterOptions`)
+      // Skip when source already has sizing from breakpoints/aspectRatio.
+      const sourceHasSizing = isKeyInTransformation(sourceOpts.transformation, 'width') ||
+        isKeyInTransformation(sourceOpts.transformation, 'aspect_ratio');
       const playerEl = this.player.el();
-      if (playerEl && playerEl.clientWidth && playerEl.clientHeight && !isKeyInTransformation(opts.transformation, 'width') && !isKeyInTransformation(opts.transformation, 'height')) {
+      if (
+        !sourceHasSizing &&
+        playerEl?.clientWidth &&
+        playerEl?.clientHeight
+      ) {
         const roundUp100 = (val) => 100 * Math.ceil(val / 100);
+        const dpr = getEffectiveDpr(sourceOpts.maxDpr);
 
-        opts.transformation = mergeTransformations(opts.transformation, {
-          width: roundUp100(playerEl.clientWidth),
-          height: roundUp100(playerEl.clientHeight),
+        posterOpts.transformation = mergeTransformations(posterOpts.transformation, {
+          width: roundUp100(playerEl.clientWidth * dpr),
+          height: roundUp100(playerEl.clientHeight * dpr),
           crop: 'limit'
         });
       }
 
-      return opts;
+      return posterOpts;
     };
 
     // Handle external (non-cloudinary plugin) source changes (e.g. by ad plugins)
diff --git a/src/plugins/cloudinary/models/video-source/video-source.js b/src/plugins/cloudinary/models/video-source/video-source.js
index 6756f9842..0436ab5da 100644
--- a/src/plugins/cloudinary/models/video-source/video-source.js
+++ b/src/plugins/cloudinary/models/video-source/video-source.js
@@ -50,7 +50,6 @@ class VideoSource extends BaseSource {
     this.isLiveStream = options.type === 'live';
     this.withCredentials = !!options.withCredentials;
     this.getInitOptions = () => initOptions;
-    this._breakpointTransformation = options.breakpointTransformation;
 
     // Get properties that need simple getter/setter methods (exclude special cases)
     const EXCLUDED_PROPERTIES = [
@@ -179,13 +178,6 @@ class VideoSource extends BaseSource {
         opts.transformation = castArray(srcTransformation);
       }
 
-      // Merge breakpoint transformation if available
-      if (this._breakpointTransformation) {
-        opts.transformation = Array.isArray(opts.transformation)
-          ? [this._breakpointTransformation, ...opts.transformation]
-          : mergeTransformations(opts.transformation || {}, this._breakpointTransformation);
-      }
-
       Object.assign(opts, { format });
 
       const [type, codecTrans] = formatToMimeTypeAndTransformation(sourceType);
diff --git a/src/utils/cloudinary.js b/src/utils/cloudinary.js
index 1f53ce482..3cf6dfd5a 100644
--- a/src/utils/cloudinary.js
+++ b/src/utils/cloudinary.js
@@ -96,7 +96,11 @@ const isKeyInTransformation = (transformation, key) => {
     return !!transformation.getValue(key);
   }
 
-  // transformation is an Object so just check for key existence in object
+  // Cloudinary chained format: { transformation: [tx1, tx2, ...] }
+  if (Array.isArray(transformation.transformation)) {
+    return !!find(transformation.transformation, (t) => isKeyInTransformation(t, key));
+  }
+
   return !!transformation[key];
 };
 
diff --git a/src/utils/consts.js b/src/utils/consts.js
index e70f71514..b55cc5d5a 100644
--- a/src/utils/consts.js
+++ b/src/utils/consts.js
@@ -12,6 +12,7 @@ export const PLAYER_EVENT = {
   TIME_UPDATE: 'timeupdate',
   EMPTIED: 'emptied',
   RETRY_PLAYLIST: 'retryplaylist',
+  REFRESH: 'refresh',
   CAN_PLAY_THROUGH: 'canplaythrough',
   CLD_SOURCE_CHANGED: 'cldsourcechanged',
   SOURCE_CHANGED: 'sourcechanged',
diff --git a/src/video-player.js b/src/video-player.js
index f02996086..2f56befb7 100644
--- a/src/video-player.js
+++ b/src/video-player.js
@@ -21,7 +21,7 @@ import { FLOATING_TO, FLUID_CLASS_NAME } from './video-player.const';
 import { isValidPlayerConfig, isValidSourceConfig } from './validators/validators-functions';
 import { PLAYER_EVENT, SOURCE_TYPE } from './utils/consts';
 import { getAnalyticsFromPlayerOptions } from './utils/get-analytics-player-options';
-import { extendCloudinaryConfig, normalizeOptions, isRawUrl, ERROR_CODE } from './plugins/cloudinary/common';
+import { extendCloudinaryConfig, normalizeOptions, isRawUrl, omitVideoOnlyTransformations, ERROR_CODE } from './plugins/cloudinary/common';
 import { isVideoInReadyState, checkIfVideoIsAvailable } from './utils/video-retry';
 import { appendQueryParams } from './utils/querystring';
 
@@ -130,6 +130,14 @@ class VideoPlayer {
     this.videojs.clearTimeout(this.reTryVideoStateTimeoutId);
   };
 
+  _handleRefresh = () => {
+    this.videojs.error(null);
+    const src = this.currentPublicId() || this.currentSourceUrl();
+    if (src) {
+      this.source(src, this.playerOptions.sourceOptions || {});
+    }
+  };
+
   _setVideoJsListeners(ready) {
     this.videojs.on(PLAYER_EVENT.ERROR, () => {
       const error = this.videojs.error();
@@ -171,6 +179,7 @@ class VideoPlayer {
     this.videojs.on(PLAYER_EVENT.PLAY, this._resetReTryVideoState);
     this.videojs.on(PLAYER_EVENT.CAN_PLAY_THROUGH, this._resetReTryVideoState);
     this.videojs.on(PLAYER_EVENT.CLD_SOURCE_CHANGED, this._onSourceChange.bind(this));
+    this.videojs.on(PLAYER_EVENT.REFRESH, this._handleRefresh.bind(this));
 
     this.videojs.ready(() => {
       this._onReady();
@@ -257,12 +266,9 @@ class VideoPlayer {
 
         const publicId = source.publicId();
 
-        const transformation = Object.assign({}, source.transformation());
-
-        if (transformation) {
-          delete transformation.streaming_profile;
-          delete transformation.video_codec;
-        }
+        const transformation = omitVideoOnlyTransformations(
+          Object.assign({}, source.transformation())
+        );
 
         // fl_sprite must be in a separate URL component when transformation has params
         const spriteTx = [...(Array.isArray(transformation) ? transformation : [transformation]), { flags: ['sprite'] }];
diff --git a/src/video-player.utils.js b/src/video-player.utils.js
index 058270d76..637a09301 100644
--- a/src/video-player.utils.js
+++ b/src/video-player.utils.js
@@ -122,7 +122,11 @@ export const splitOptions = (flatOptions) => {
     Object.assign(options, options.videojs);
     delete options.videojs;
   }
-  
+  // Pass aspectRatio to videojs so it keeps applying aspect-ratio CSS to the video element
+  if (playerOptions.sourceOptions?.aspectRatio) {
+    options.aspectRatio = playerOptions.sourceOptions.aspectRatio;
+  }
+
   return { playerOptions, videojsOptions: options };
 };
 
diff --git a/test/unit/breakpoints.test.js b/test/unit/breakpoints.test.js
index 06146f16f..efc51ed69 100644
--- a/test/unit/breakpoints.test.js
+++ b/test/unit/breakpoints.test.js
@@ -22,10 +22,7 @@ describe('Breakpoints - Unit Tests', () => {
   it('should apply breakpoints when enabled with width only (no dpr in transformation)', () => {
     const source = new VideoSource('sea_turtle', {
       cloudinaryConfig: cld,
-      breakpointTransformation: {
-        width: 640,
-        crop: 'limit'
-      }
+      transformation: { width: 640, crop: 'limit' }
     });
 
     const srcs = source.generateSources();
@@ -38,20 +35,17 @@ describe('Breakpoints - Unit Tests', () => {
     const url = 'https://example.com/test.mp4';
     const source = new VideoSource(url, {
       cloudinaryConfig: cld,
-      breakpointTransformation: {
-        width: 640,
-        crop: 'limit'
-      }
+      transformation: { width: 640, crop: 'limit' }
     });
 
     const srcs = source.generateSources();
     expect(srcs[0].src).toEqual(url);
   });
 
-  it('should not apply breakpoints when breakpointTransformation is null', () => {
+  it('should not apply breakpoints when transformation has no breakpoint params', () => {
     const source = new VideoSource('sea_turtle', {
       cloudinaryConfig: cld,
-      breakpointTransformation: null
+      transformation: {}
     });
     expect(source.generateSources()[0].src).not.toContain('c_limit');
   });
@@ -59,8 +53,7 @@ describe('Breakpoints - Unit Tests', () => {
   it('should not add crop: limit when transformation already has crop (crop-mode set)', () => {
     const source = new VideoSource('sea_turtle', {
       cloudinaryConfig: cld,
-      transformation: { crop: 'fill' },
-      breakpointTransformation: { width: 640 }
+      transformation: { width: 640, crop: 'fill' }
     });
 
     const srcs = source.generateSources();
@@ -75,7 +68,7 @@ describe('Breakpoints - Unit Tests', () => {
     const source = new VideoSource('sea_turtle', {
       cloudinaryConfig: cld,
       maxDpr: 2,
-      breakpointTransformation: { width: 1280, crop: 'limit' }
+      transformation: { width: 1280, crop: 'limit' }
     });
 
     const url = source.generateSources()[0].src;
@@ -87,36 +80,50 @@ describe('Breakpoints - Unit Tests', () => {
 });
 
 describe('Breakpoints - getEffectiveDpr', () => {
+  const originalDevicePixelRatio = Object.getOwnPropertyDescriptor(window, 'devicePixelRatio');
+
+  afterEach(() => {
+    if (originalDevicePixelRatio) {
+      Object.defineProperty(window, 'devicePixelRatio', originalDevicePixelRatio);
+    }
+  });
+
   it('dpr 1 → width based on playerWidth * 1', () => {
-    const effectiveDpr = getEffectiveDpr(1, 1);
+    Object.defineProperty(window, 'devicePixelRatio', { value: 1, configurable: true });
+    const effectiveDpr = getEffectiveDpr(1);
     const width = widthFromRequired(500 * effectiveDpr);
     expect(effectiveDpr).toBe(1);
     expect(width).toBe(widthFromRequired(500));
   });
 
   it('dpr 1.5 → width based on playerWidth * 1.5', () => {
-    const effectiveDpr = getEffectiveDpr(1.5, 1.5);
+    Object.defineProperty(window, 'devicePixelRatio', { value: 1.5, configurable: true });
+    const effectiveDpr = getEffectiveDpr(1.5);
     const width = widthFromRequired(500 * effectiveDpr);
     expect(effectiveDpr).toBe(1.5);
     expect(width).toBe(widthFromRequired(750));
   });
 
   it('dpr 2 (default) → width based on playerWidth * 2', () => {
-    const effectiveDpr = getEffectiveDpr(2, 2);
+    Object.defineProperty(window, 'devicePixelRatio', { value: 2, configurable: true });
+    const effectiveDpr = getEffectiveDpr(2);
     const width = widthFromRequired(500 * effectiveDpr);
     expect(effectiveDpr).toBe(2);
     expect(width).toBe(widthFromRequired(1000));
   });
 
   it('user passes maxDpr 3 but device is 1 → effective is 1 (capped)', () => {
-    expect(getEffectiveDpr(3, 1)).toBe(1);
+    Object.defineProperty(window, 'devicePixelRatio', { value: 1, configurable: true });
+    expect(getEffectiveDpr(3)).toBe(1);
   });
 
   it('user passes maxDpr 3 but device is 2 → effective is 2 (capped to max)', () => {
-    expect(getEffectiveDpr(3, 2)).toBe(2);
+    Object.defineProperty(window, 'devicePixelRatio', { value: 2, configurable: true });
+    expect(getEffectiveDpr(3)).toBe(2);
   });
 
   it('user passes maxDpr 1.5 but device is 1 → effective is 1 (device is lower)', () => {
-    expect(getEffectiveDpr(1.5, 1)).toBe(1);
+    Object.defineProperty(window, 'devicePixelRatio', { value: 1, configurable: true });
+    expect(getEffectiveDpr(1.5)).toBe(1);
   });
 });
