4

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

Improve this question
5
  • 1
    so you have the same component giving you two markups , only difference is the video link/type ?
    – Abhay Dhar
    Commented Jul 7, 2020 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
    Commented Jul 8, 2020 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
    Commented Jul 9, 2020 at 6:31
  • I had already entered the ID of the YouTube video in the component presentation details
    – Ben Davies
    Commented Jul 20, 2020 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
    Commented Jul 21, 2020 at 12:19

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.