responsive video using built in embed

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Claushingebjerg 936 posts 2571 karma points

Dec 09, 2014 @ 16:32

0

Responsive Video using built in embed

Using Umbraco 7

Im using the fitvids javascript to make embedded videos responsive.

Is there a simple way to wrap a video from the built in embedder in a div, so i can target it with fitvids?

Either in embeddedmedia.config or tinyMceConfig.config?

Copy Link
Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib

Dec 09, 2014 @ 16:38

0

Don't think so. But you can create your own oEmbed provider that wraps the output in a div.

Here is the source code for the default video embed : https://github.com/umbraco/Umbraco-CMS/blob/7.2.1/src/Umbraco.Web/Media/EmbedProviders/OEmbedVideo.cs

Just wrap the output in a div. Don't forget to update the embeddedmedia.config

dave

Copy Link
Claushingebjerg 936 posts 2571 karma points

Dec 10, 2014 @ 08:42
103
Well, i have the bad excuse of being a front ender, so im going for a client side solution.
```
$( ".content iframe" ).wrap( "<div class='videowrapper'></div>" );
```
Seems to work fine
Copy Link

MrFlo 159 posts 403 karma points

Apr 25, 2017 @ 12:30

I found this while googling so I will add the backend code.

Create a class in your project:

using System.Xml;
using Umbraco.Web.Media.EmbedProviders;

namespace ClassicCarPassion.EmbedProviders
{
    public class OEmbedVideo : AbstractOEmbedProvider
    {
        public override string GetMarkup(string url, int maxWidth, int maxHeight)
        {
            string requestUrl = BuildFullUrl(url, maxWidth, maxHeight);

            XmlDocument doc = GetXmlResponse(requestUrl);
            return "<div class=\"videowrapper\">" + GetXmlProperty(doc, "/oembed/html")+"</div>";
        }
    }
}

Change the config:

<!-- Youtube Settings -->
  <provider name="Youtube" type="ClassicCarPassion.EmbedProviders.OEmbedVideo, ClassicCarPassion">
    <urlShemeRegex><![CDATA[youtu(?:\.be|be\.com)/(?:(.*)v(/|=)|(.*/)?)([a-zA-Z0-9-_]+)]]></urlShemeRegex>
    <apiEndpoint><![CDATA[https://www.youtube.com/oembed]]></apiEndpoint>
    <requestParams type="Umbraco.Web.Media.EmbedProviders.Settings.Dictionary, umbraco">
      <param name="iframe">1</param>
      <param name="format">xml</param>
      <param name="scheme">https</param>
    </requestParams>
  </provider>

You might have to change the setting for all video providers

Copy Link

Richard Hamilton 36 posts 158 karma points

Jul 21, 2020 @ 07:55

0

Where's that config file? Its been a while since I've needed to do this

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib

Jul 21, 2020 @ 08:28

0

Hi Richard

If your Umbraco instance is v7 then the config file should be located in the "config" folder in the root of your project. If you're using v8 then this config no longer exists. Many configs have been removed so I think you should have a look at using an "embed provider", which has been documented here https://our.umbraco.com/documentation/extending/Embedded-Media-Provider/

Callum Whyte made a good article for Skrift about some of the differences between Umbraco 7 and 8, which might be nice for you to read if you're on v8 https://skrift.io/issues/who-moved-my-cheese/ :-)

Hope this helps!

Copy Link
Richard Hamilton 36 posts 158 karma points

Aug 03, 2020 @ 13:35

0

Its actually Umbraco 8 so that's why I couldn't find the config file! Thanks for the link :)

Copy Link
Travis Schoening 47 posts 173 karma points

Jun 29, 2017 @ 00:23

0

I'm trying to implement this, and I'm getting the error "Could not embed media - please ensure the URL is valid". Anyone try to do the same thing but get that result and figure out how to correctly use it?

I'm using 7.6.3.

Thanks!

Copy Link
Eric Wilkinson 21 posts 91 karma points

Oct 15, 2019 @ 13:30

0

It sounds like your youtube video URL didn't pass the validation that is defined in the urlSchemeRegex.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?