Video embed best practices

Design help Custom code
#1

Hi Webflow World,

Wanted to start a thread about best practices for embedding video on our Webflow sites without controls, sound, always autoplaying and looping. Seems like something several users (one, two) are interested in but the posts I’ve found still leave me with questions.

The goal of my inquiry is video content similar to what’s found on these sites:

Basically the end result would be gif-like without sacrificing quality as a GIF often does.

I’m thinking the embed element would be the best way forward based on @garymichael1313 comments here, but I’m struggling to get the code right. I also attempted to follow @Ben-Probity’s instructions but I am still seeing some overlays and letter boxing.

I’m open to using services like Embed.ly but want to make sure it’s the best option.

Again, the use case is primarily to showcase short clips (like this) exemplifying designs etc.

Therefore, if anyone has the time, it would be helpful to consolidate the following:

  • using the HTML embed widget in Webflow to embed videos and instructions on how to (re)size them
  • what services, if any, are best to use for freelance web developers who are using a lot of passive video in their projects
  • the use case and limitations of the “background video” widget
  • the use case and limitations of the “video” widget

Of course, also welcome would be any links to tutorials and posts I missed in my research.

Thanks,

Nick

P.S. To give a specific example: I would love to be able to make the “Cabot House” element of this portfolio page a video instead of a static image. For reference, here is my read-only link.

The first problem I encountered was:

You can’t put the video widget within a link block which is problematic because I want the user to have a consistent experience (i.e. they can click the whole element regardless of whether it’s a video or image preview, as opposed to only being able to click the header text on video elements due to the aforementioned constraint)

That prompted me to explore how to go about embedding a parred down video element, which I expected to be simple, but was surprised to find, was actually quite confusing.

3 Likes
#2

Hey npfosi,
The issue that you will have with my previous post is that youtube has updated their embed structure since then which unfortunately now disallows you to remove the cards and hide the info using ?showinfo=0. There used to be a method to loop the videos from youtube by embedding a playlist which only had the one video in it by adding ?loop=1 at the end of the embed playlist code from youtube (Not sure if this method still works though).

I noticed that the videos on 5scontent were hosted on vimeo as well as their own site which will eliminate the info shown of the video.

As for embedding videos on Webflow there are a few ways to go about this.

  • Background Video Element
  • Video Element
  • Youtube Element
  • Embed Element

If using the HTML embed widget you will add css to the embed element itself allowing it to be resized whilst keeping the aspect ratio of the video across multiple media queries.

Example: https://codepen.io/jonrohan/pen/PqqdBz

If possible I would recommend either hosting the media yourself or using something like vimeo as this will allow you more control over what overlay is shown on your videos (Vimeo from memory is now a paid service, not sure if they still allow free accounts though).

Personally, I don’t use either Background Video, Video or Youtube elements as I am unable to dynamically insert the source into the embed tags, especially when using a CMS collection (Hense Embed Element to me is superior). You can also place an embed element into a link block too.

I hope this answers some of your questions

Cheers,
Ben

#3

Thanks for the thorough reply! Good to now re: YouTube. I see your point about the embed and that would be my preference moving forward.

Can you help me understand how best to host the content myself? I have a NAS set up for storing and archiving my photography archive (QNAP) and started looking into using it as a Web Server but felt out of my depth. I tried researching it myself but couldn’t find my use case. Any resources you could recommend?

As for your codepen link. Much appreciated. How do I add the styling that removes the elements as you mentioned in your previous post, in CSS? Apologies if this is a rudimentary question, only just starting to understand CSS and JavaScript.

Maybe it’d be simpler for me to pay for Vimeo again. I tried myself to figure out how 5scontent was managing that video using the “Inspect” tool in Chrome but didn’t get to any HTML I could interpret. What method did you use to determine they used Vimeo?

Thanks again for getting in touch. I appreciate you taking the time.

Nick

#4

if you click “view page source” instead of inspect you can do command + f to search for specific words in the code. in this case you would search for youtube, vimeo or any other video hosting platform to see if anything comes up. there maybe an easier way to do it but that is how i would do it to try to figure out who was hosting the videos.

1 Like
#5

Hey npfosi,
I would be either looking into a cheap hosting provider that you could use as an online storage for your movies or use for ease just use vimeo (already set up specifically for video hosting). It isn’t really advised to use your NAS as it typically won’t perform anywhere near as good as even the cheapest of webhosts. The problem and lag will become more and more apparent with the increase in traffic to your site and the number of videos from your NAS.

After a quick search I found a tutorial on how to install a Joomla CMS on a QNAP Turbo which apparently has an integrated phpMyAdmin and MySQL database. (Having those two things will allow you to run a Wordpress, Joomla and Drupal CMS)

Link to artical

For the css styling: Once you have placed your HTML inside the embed element you can give the embed element a class and then add the CSS styles using the designer panel.

Parent classes such as
.video iframe
can be placed on the child element within the embed element using the style attribute.

Example:
<iframe src="https://www.youtube.com/embed/wCc2v7izk8w?rel=0&amp;showinfo=0" frameborder="0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
Or you could even give that iframe a class then place that class on a hidden div somewhere on the page. I would recommend either using the styling on the element it self of using the custom code section in the page settings to add the parent class.

I found the vimeo video inside the inspect tool. If you right click on the header video and open inspect it will show the div class=“o-container”. Underneath that you will see one called “c-home-header-play__video” keep opening that and it will lead you to
< a href=“https://player.vimeo.com/video/313040683” data-module=“Overlay”>
< div class=“js-video-home || c-home-header-play__play-video” data-src=“https://5scontent.com/app/uploads/2019/01/Home_REEL.mp4”>< video muted="" playsinline="" autoplay="" loop="" src=“https://5scontent.com/app/uploads/2019/01/Home_REEL.mp4”>< /video>< /div>
< /a>

they also have some of the videos hosted on their site too.

By the looks of their coding they are running animate.js if that helps any.

@dapitts08 that would be the proficient way to do it… I just like to click the arrows (terrible affliction)
Cheers,
Ben

1 Like
#6

Thanks again for your help @Ben-Probity. I am working on following your instructions. I’ve gone ahead and paid for Vimeo. Using the player customization features as well as the ?autoplay=true&loop=true&muted=true URL parameters (URL player parameters help page) I have embedded this line of code with the HTML element:

<iframe src="https://player.vimeo.com/video/319482498?autoplay=true&loop=true&muted=true" width="640" height="423" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Re:

  1. My first issue is it seems as if Webflow doesn’t allow you to nest an embed element in a link block. Have a misunderstood you? See attached video.
  1. My second issue is on hover I still get the video play button and I’m not sure how to eliminate that.

For reference, here is my read-only link again.

#7

Interesting that the embed isn’t allowed to be placed inside of a link block I could have sworn it could but no biggie as you can just wrap the iframe in a link tag ie: <a href="AwesomeLink"><iframe src="CoolVideo"></iframe></a>

As for the second issue that is simply fixed by placing &background=1 or &background=true at the end of your video code making it look like this:
<iframe src="https://player.vimeo.com/video/319482498?autoplay=true&loop=true&muted=true&background=true" width="640" height="423" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

My Share Link: https://preview.webflow.com/preview/embed-video-test?utm_source=embed-video-test&preview=f9b9f5851890ba19a15c75649521c10b
Example Preview: https://embed-video-test.webflow.io/

disregard the embed container div as that was just so it didn’t take up the whole screen. I used the hidden div trick for the iframe sizing which you will see in the navigator in the “hidden” div but you could just put the code manually into the head custom code section up to you.

Hope it helps,
Ben

EDIT: I am at a loss as my demo is no longer working or responsive. I will have to have a look later on today and get back to you on this issue.

#8

What I ended up doing is adding the css to the head custom code section. Then within the embed element I put a div with the class “videoWrapper” then inside the div I placed your iframe and then an anchor link. The css is:

.videoWrapper {
  display:block;
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
}
.videoWrapper iframe, .videoWrapper a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.videoWrapper iframe {
  z-index: -1;
}

This then allowed me to have a link cover your responsive video. Adding width size to the embed element will allow you to size your video for you project. For the moment the html embed element is set to 50% of the screen. Your video isn’t 16:9 so there will be padding either side of your video. You will have to work out the percentage ratio to get your video resolution.

Hope this helps to answer your question better.

Cheers,
Ben

EDIT: Your video padding to eliminate the space is 65.4%

1 Like
#9

Hi guys, I have a better option and an elegant one as well, try vidyard, it allows you to embed your video without any branding or suggested videos like YT, in addition, you can choose a GIF thumbnail to the video. See my website tribal.credit

Hope this helps!

3 Likes
#10

Vidyard seems like exactly what I’ve been looking for, are you then able to embed with a standard video element?

1 Like