Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • samstroud 6 posts 25 karma points
    Jan 08, 2024 @ 13:22
    samstroud
    0

    Issue with embedded YouTube videos

    Hi

    I'm using Umbraco 10.7.0.

    I'm trying to embed a YouTube video.

    I've tried both using the 'Embed' feature in the text editor, and pasting the embed code from Youtube into the source control, i.e. these options:

    <p><iframe width="360" height="203" src="https://www.youtube.com/embed/zktdGjl0fLo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p>

    and:

    <div class="mceNonEditable embeditem" data-embed-url="https://www.youtube.com/watch?v=zktdGjl0fLo" data-embed-height="240" data-embed-width="360" data-embed-constrain="true"><iframe width="360" height="203" src="https://www.youtube.com/embed/zktdGjl0fLo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" title="Searching Unite's Interactive Collective Agreements Database"></iframe></div>

    When I use either of these options, the embedded video appears in the following window:

    enter image description here

    However when I select 'Save and preview/publish', the embedded video is no longer visible:

    enter image description here

    What's the solution to this?

    Thanks Sam

  • Danine Noble 81 posts 347 karma points
    Jan 08, 2024 @ 19:32
    Danine Noble
    0

    Heya Sam ^^

    My best guess would be a Content Security Policy is restricting the view-ability of the embed. Are there any console errors about a csp violation when you view the page?

    If so, you would just need to add www.youtube.com to the allowed sites. Implementations can vary, but by default this would be something in the Startup.cs. An example of what to look for (if using Joonasw):

    app.UseCsp(csp => 
    {
            csp.ByDefaultAllow.FromSelf().From("packages.umbraco.org our.umbraco.org www.youtube.com");
    ... 
    ... other csp settings etc.
    }
    
  • samstroud 6 posts 25 karma points
    Jan 09, 2024 @ 10:02
    samstroud
    0

    Hi Danine

    Thanks for the response.

    Is the below what you mean re console errors? Does this shed any light on the issue?

    enter image description here

    Best Sam

  • samstroud 6 posts 25 karma points
    Jan 09, 2024 @ 12:22
    samstroud
    1

    Hi Danine

    I've actually got to the bottom of this - it was to do with cookies. Clearing browsing data has fixed it and now the video displays.

    I have another question on how it displays on the page - how can I make 'Uploading agreements' appear below the first YouTube video, and 'Click here to use the database' appear below that?

    enter image description here

    I've tried adding paragraph spacing beneath each video, and adding each section as a different content block in the dynamic content tab, however neither has worked.

    Thanks Sam

  • Danine Noble 81 posts 347 karma points
    Jan 09, 2024 @ 17:18
    Danine Noble
    0

    Wonderful! Glad you were able to find the issue and solve it. If it was a Content Security Policy it would typically be an error-level (the screenshot was all warnings) and specifically mention those three words ;D


    Regarding trying to do layouts inside of a rich text, that is generally the way of madness. It'd be less of a hassle in the long run to have a block grid setup or create a component for video listings that handles the layout.

    But if it must be an RTE... It is hard to say exactly since I can't see your styles or markup to see what's all in play here, but I'm going to guess you're trying to use floats? Better practice would be to employ flex for a listing. Float is meant to have text wrapping around a contextual image relevant to the content its in.

    If 'block' or 'clear' are not defined in any site styles that would explain why they aren't doing anything.

    Taking a stab in the dark & just using inline styling (as I don't know what you have available in your site styles), it could look something like this:

    <div style="display:flex;flex-wrap:wrap;gap:1rem;"> // a listing container
      <div style="flex-grow:1;min-width:360px;"> // column container for grouping content; repeatable
        --title here--
        --video here--
        --other links/button elements etc--
      </div>
      <div style="flex-grow:1;min-width:360px;">
        --2nd column stuff here--
      </div>
    </div>
    

    It'd be better as a component or at least a prepped style group than inline like this, but this is simply for minimal demonstration purposes.

  • samstroud 6 posts 25 karma points
    Jan 09, 2024 @ 14:12
    samstroud
    0

    I've also tried using:

    <div class="block">
      <div class="top">stuff goes here</div>
      <div class="bottom">more stuff</div>
    

    and

    <p class="clear">
    

    however the same issue is occurring!

    Any help much appreciated.

    Thanks

    Sam

  • Rick Mason 10 posts 93 karma points
    28 days ago
    Rick Mason
    0

    I just ran into this and confirmed it on a clean install of 13.3.0. It's this bug and the workaround is to click inside the rich text editor after inserting the video.

    Now logged as https://github.com/umbraco/Umbraco-CMS/issues/16212

Please Sign in or register to post replies

Write your reply to:

Draft