diff --git a/components/atom/videoPlayer/src/components/Switcher.js b/components/atom/videoPlayer/src/components/Switcher.js
deleted file mode 100644
index 9fd486a7c..000000000
--- a/components/atom/videoPlayer/src/components/Switcher.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types'
-
-import useDetectVideoType from '../hooks/useDetectVideoType.js'
-import {VIMEO, YOUTUBE} from '../settings.js'
-import VimeoPlayer from './VimeoPlayer.js'
-import YouTubePlayer from './YouTubePlayer.js'
-
-const Switcher = ({src}) => {
-  const {detectVideoType} = useDetectVideoType()
-  const videoType = detectVideoType(src)
-  switch (videoType) {
-    case VIMEO.VIDEO_TYPE:
-      return <VimeoPlayer src={src} />
-
-    case YOUTUBE.VIDEO_TYPE:
-      return <YouTubePlayer src={src} />
-
-    default:
-      return <h1>Not supported media type</h1>
-  }
-}
-
-Switcher.propTypes = {
-  src: PropTypes.string
-}
-
-export default Switcher
diff --git a/components/atom/videoPlayer/src/components/VimeoPlayer.js b/components/atom/videoPlayer/src/components/VimeoPlayer.js
index e882b972f..fa2315446 100644
--- a/components/atom/videoPlayer/src/components/VimeoPlayer.js
+++ b/components/atom/videoPlayer/src/components/VimeoPlayer.js
@@ -1,28 +1,24 @@
 import PropTypes from 'prop-types'
 
 import useVimeoProperties from '../hooks/useVimeoProperties.js'
-import {BASE_CLASS} from '../settings.js'
 
 const VimeoPlayer = ({src}) => {
   const {getEmbeddableUrl} = useVimeoProperties()
   const videoSrc = getEmbeddableUrl(src)
 
   return (
-    <>
-      <div className={`${BASE_CLASS}-vimeoPlayer`}>
-        <iframe
-          className={`${BASE_CLASS}-vimeoPlayerFrame`}
-          title="VIMEO video player"
-          src={videoSrc}
-          frameBorder="0"
-          allow="autoplay; fullscreen; picture-in-picture"
-          allowFullScreen
-        ></iframe>
-      </div>
-      {/* Is this really needed? */}
-      {/* <script src="https://player.vimeo.com/api/player.js"></script> */}
-    </>
+    <iframe
+      title="VIMEO video player"
+      src={videoSrc}
+      frameBorder="0"
+      allow="autoplay; fullscreen; picture-in-picture"
+      allowFullScreen
+    />
   )
+  /*
+   ** Is this really needed?
+   ** <script src="https://player.vimeo.com/api/player.js"></script>
+   * */
 }
 
 VimeoPlayer.propTypes = {
diff --git a/components/atom/videoPlayer/src/components/YouTubePlayer.js b/components/atom/videoPlayer/src/components/YouTubePlayer.js
index ee4d9bea0..f442f1614 100644
--- a/components/atom/videoPlayer/src/components/YouTubePlayer.js
+++ b/components/atom/videoPlayer/src/components/YouTubePlayer.js
@@ -14,7 +14,7 @@ const YouTubePlayer = ({src}) => {
       frameBorder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
       allowFullScreen
-    ></iframe>
+    />
   )
 }
 
diff --git a/components/atom/videoPlayer/src/components/index.js b/components/atom/videoPlayer/src/components/index.js
new file mode 100644
index 000000000..43bcd7061
--- /dev/null
+++ b/components/atom/videoPlayer/src/components/index.js
@@ -0,0 +1,4 @@
+import YouTubePlayer from './YouTubePlayer.js'
+import VimeoPlayer from './VimeoPlayer.js'
+
+export {YouTubePlayer, VimeoPlayer}
diff --git a/components/atom/videoPlayer/src/hooks/useDetectVideoType.js b/components/atom/videoPlayer/src/hooks/useDetectVideoType.js
deleted file mode 100644
index 91723a491..000000000
--- a/components/atom/videoPlayer/src/hooks/useDetectVideoType.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import {UNKNOWN, VIMEO, YOUTUBE} from '../settings.js'
-
-const useDetectVideoType = () => {
-  const detectVideoType = src => {
-    if (src.includes(YOUTUBE.VIDEO_TYPE) || src.includes(YOUTUBE.SHORT_URL))
-      return YOUTUBE.VIDEO_TYPE
-
-    if (src.includes(VIMEO.VIDEO_TYPE)) return VIMEO.VIDEO_TYPE
-
-    return UNKNOWN
-  }
-  return {detectVideoType}
-}
-
-export default useDetectVideoType
diff --git a/components/atom/videoPlayer/src/hooks/useVideoPlayer.js b/components/atom/videoPlayer/src/hooks/useVideoPlayer.js
new file mode 100644
index 000000000..cf58304d2
--- /dev/null
+++ b/components/atom/videoPlayer/src/hooks/useVideoPlayer.js
@@ -0,0 +1,35 @@
+import {VIMEO, YOUTUBE, BASE_CLASS} from '../settings.js'
+import {VimeoPlayer, YouTubePlayer} from '../components/index.js'
+
+const matcher = (arrayPattern, value) =>
+  arrayPattern.find(pattern => value.includes(pattern))
+
+const useVideoPlayer = ({
+  as: As = 'div',
+  children = 'Not supported media type',
+  className,
+  src = '',
+  ...props
+} = {}) => {
+  if (matcher([YOUTUBE.VIDEO_TYPE, YOUTUBE.SHORT_URL], src)) {
+    return [
+      YouTubePlayer,
+      {
+        className: [BASE_CLASS, `${BASE_CLASS}-youtubePlayer`].join(' '),
+        src,
+        ...props
+      }
+    ]
+  } else if (matcher([VIMEO.VIDEO_TYPE], src)) {
+    return [
+      VimeoPlayer,
+      {
+        className: [BASE_CLASS, `${BASE_CLASS}-vimeoPlayer`].join(' '),
+        src,
+        ...props
+      }
+    ]
+  }
+  return ['h1', {className: BASE_CLASS, children, ...props}]
+}
+export default useVideoPlayer
diff --git a/components/atom/videoPlayer/src/index.js b/components/atom/videoPlayer/src/index.js
index 9cad11677..d72fdeb08 100644
--- a/components/atom/videoPlayer/src/index.js
+++ b/components/atom/videoPlayer/src/index.js
@@ -1,16 +1,24 @@
+import {forwardRef} from 'react'
 import PropTypes from 'prop-types'
 
-import Switcher from './components/Switcher.js'
-import {BASE_CLASS} from './settings.js'
-export default function AtomVideoPlayer({src = ''}) {
+import useVideoPlayer from './hooks/useVideoPlayer.js'
+
+const AtomVideoPlayer = forwardRef((props, forwardedRef) => {
+  const [Component, {className, as: As = 'div', ...componentProps}] =
+    useVideoPlayer(props)
   return (
-    <div className={BASE_CLASS}>
-      <Switcher src={src} />
-    </div>
+    <As className={className} ref={forwardedRef}>
+      <Component {...componentProps} />
+    </As>
   )
-}
+})
 
 AtomVideoPlayer.displayName = 'AtomVideoPlayer'
 AtomVideoPlayer.propTypes = {
+  /* Render the passed value as the correspondent HTML tag or the component if a function is passed */
+  as: PropTypes.elementType,
+  // TODO: document
   src: PropTypes.string
 }
+
+export default AtomVideoPlayer