Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Graphics, Flash and Multimedia _ Why youtube link selected in ckeditor5 is not visible on frontend?

Posted by: nilovsergey Aug 3 2023, 05:54 AM

ln laravel 8 / jquery 3.6 / ckeditor5 when in admin area I click on "Insert media" standart toolbar
button: https://prnt.sc/dpxoza8_CTlC I copypaste youtube url
and ckeditor5 shows this video ok, but problem is that I can not render this video on frontend part.
In blade.php file I have lines :

CODE
        <div class="news-view-content">
            {!! $news->content !!}
            <hr>
            <hr>
            <hr>
            {{ $news->content }}
        </div>


Text of the content on frontend is:

CODE
    <figure class="media">
        <oembed url="https://www.youtube.com/watch?v=hufhhf2MSHU"></oembed>
    </figure>

But what I see in browser: https://prnt.sc/s-p6oRP6-TaA



I made some checks and found that when I need to show youtube video I can use html code like:

CODE
     <iframe
        src="https://www.youtube.com/embed/key"
        title="_you_tubevideoplayer" frameborder="0"
        allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture;web-share" allowfullscreen>
    </iframe>


When I need to show uploaded video I need to use tag :

CODE
    <video controls preload="auto"
        class="news-videovideo-jsnews_video_playervjs-theme-forest"
        data-setup='{}' type="video/x-msvideo">
        <source src="http://127.0.0.1:8000/storage/160/sample.avi">
    </video>

These 2 ways above works ok for my app.

But they are different "oembed" tag which is used in default ckeditor5 toolbar. Are there some options to change oembed tag with tags which works in my case ?

Maybe some different plugins?





Posted by: Christian J Aug 3 2023, 11:58 AM

There is no OEMBED element, it should be EMBED.

Also, it's better investing your time learning HTML directly, instead of learning how to use various tools and plugins that may or may not work properly.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)