Paste a modified html-file into itself

Question

I want to take an existing HTML file, filter through it for embedded youtube links, replace those with just the thumbnail to prevent automatic cookies and then paste the modified file into itself so that the user only sees the latter. Now I'm pretty new to Webdesign so I'm having some problems since there seem to be a lot of different components.

Now I've installed umbraco and embedded a youtube link in the default page. I thought that I could just copy the code by using File.ReadAllText and paste it again but I was told that Razor prevents me from just pasting the html. This is the File I want to modify

@inherits Umbraco.Web.Mvc.UmbracoViewPage<ContentModels.Blog>
@using Umbraco.Web;
@{
    Layout = "master.cshtml";
}
@Html.Partial("~/Views/Partials/SectionHeader.cshtml")

<section class="section">

   <div class="container" ng-controller="WebApplication1\WebApplication1\ManipulateRenderedHtml.cs">
         <iframe id="test" width="560" height="315" src="https://www.youtube.com/embed/5tVGei24TdQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         <button type="button" class="btn btn-primary" ng-click="UpdateOutputHtml(File.ReadAllText(WebApplication1\WebApplication1\Views\Blog.cshtml))">YTTest</button>
   </div>    

</section>```

The UpdateOutputHtml is in C#, which I'm also new to, and gets the html as a string and outputs it as such after the modifications. I'm really not sure of my next steps and probably have lots of blind spots since I just started on the subject, for example I'm not even sure I can even use ng-controller to call a function in a c# File in the fashion I did.

Any help would be appreciated.

score 0 · Answer 1 · answered Aug 22 '20 at 15:28

The question you ask is pretty bizar.

How I would do this in umbraco, if you want to show a few thumbnails of a few youtube videos. Each of the child "video" nodes can have a property with a Youtube ID

If you have each video defined in umbraco as a Node under a parent node "videos", then you could write something like this:

@foreach(var video in videos.Children) 
{
  var videoSrc = https://img.youtube.com/vi/" + video.Value("youtubeId") + "/0.jpg";
  <img src="@videoSrc" />
}

To find out how to find other previews of youtube images, check this StackOverflow post: https://stackoverflow.com/a/2068371/97615

Paste a modified html-file into itself

1 Answers1