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.
}
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?
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.
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:
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.
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:
However when I select 'Save and preview/publish', the embedded video is no longer visible:
What's the solution to this?
Thanks Sam
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):
Hi Danine
Thanks for the response.
Is the below what you mean re console errors? Does this shed any light on the issue?
Best Sam
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?
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
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:
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.
I've also tried using:
and
however the same issue is occurring!
Any help much appreciated.
Thanks
Sam
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
is working on a reply...