3

I am using a Video component and I've created a couple examples, 1 video uses a YouTube source, the other uses a video in the media library. On mobile devices, the Youtube video doesn't show the thumbnail, but the media library video shows the thumbnail. See below image for example:

Screenshot of issue

Device used is Samsung S10 Chrome Browser

Mark-up for Youtube Video:

<div class="component video col-12 initialized video-small" data-properties="{&quot;enableKeyboard&quot;:&quot;true&quot;,&quot;pluginPath&quot;:&quot;https://mc-8cf7ec5e-425e-4669-a538-703351-cd.azurewebsites.net/-/media/base-themes/core-libraries/other/&quot;,&quot;name&quot;:&quot;Movie&quot;,&quot;completedTime&quot;:&quot;null&quot;}" style="margin-top: 80px;">

    <div class="component-content">
            <div class="mobile-youtube">
                <iframe allowfullscreen="" src="//www.youtube.com/embed/hnp1pt8biD4"></iframe>
            </div>
        <div class="video-caption">
            Caption copy goes here
        </div>
        <div class="video-description">
            
        </div>
    </div></div>

And the mark-up for the Media Library Video:

<div class="component video col-12 initialized video-small" data-properties="{&quot;enableKeyboard&quot;:&quot;true&quot;,&quot;pluginPath&quot;:&quot;https://mc-8cf7ec5e-425e-4669-a538-703351-cd.azurewebsites.net/-/media/base-themes/core-libraries/other/&quot;,&quot;name&quot;:&quot;Movie&quot;,&quot;completedTime&quot;:&quot;null&quot;}">

    <div class="component-content">
            <div class="sxa-video-wrapper">
                <video style="width: 100%; height: 100%;" preload="none" poster="https://mc-8cf7ec5e-425e-4669-a538-703351-cd.azurewebsites.net/-/media/project/london-and-quadrant/lqgroup/dev-sample-assets/test-images/vidplaceholder.jpg">
                        <source type="video/mp4" src="https://mc-8cf7ec5e-425e-4669-a538-703351-cd.azurewebsites.net/-/media/project/london-and-quadrant/lqgroup/dev-sample-assets/test-video/test.mp4">
                    <object type="application/x-shockwave-flash" data="https://mc-8cf7ec5e-425e-4669-a538-703351-cd.azurewebsites.net/-/media/base-themes/core-libraries/other/flashmediaelement.swf">
                        <param name="movie" value="https://mc-8cf7ec5e-425e-4669-a538-703351-cd.azurewebsites.net/-/media/base-themes/core-libraries/other/flashmediaelement.swf">
                        <param name="flashvars" value="controls=true&amp;poster=https://mc-8cf7ec5e-425e-4669-a538-703351-cd.azurewebsites.net/-/media/project/london-and-quadrant/lqgroup/dev-sample-assets/test-images/vidplaceholder.jpg&amp;file=https://mc-8cf7ec5e-425e-4669-a538-703351-cd.azurewebsites.net/-/media/project/london-and-quadrant/lqgroup/dev-sample-assets/test-video/test.mp4">
                    </object>
                </video>
                <div class="video-init"></div>
            </div>
        <div class="video-caption">
            Caption copy goes here
        </div>
        <div class="video-description">
            
        </div>
    </div></div>

Is this OOTB SXA Behavior? Is there a way to resolve this?

Sitecore Version: 9.3

Thanks in advance

  • 1
    so you have the same component giving you two markups , only difference is the video link/type ? – Abhay Dhar Jul 7 at 9:47
  • Correct, the top block of mark is from a youtube video, the other block is from a video stored in the Media library. The device being an android mobile on both. – Ben Davies Jul 8 at 14:55
  • can u try giving just the ID of youtube video in the component presentation details. Enter the ID , remove the video Url – Abhay Dhar Jul 9 at 6:31
  • I had already entered the ID of the YouTube video in the component presentation details – Ben Davies Jul 20 at 13:50
  • I am not sure , maybe you could add screenshots of the presentation details of the components ,for us to understand this better ( to this SO question) – Abhay Dhar Jul 21 at 12:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.