video embeds

ways to embed video in grid sites..

abc.. xyz

To add videos to a site, we’re going to have to use the embedded html option. This means that we will need the share or embed code from the video hosting site.

On this page, we’ve embedded videos from TED, Vimeo, Facebook and of course Youtube.

Using the code as is.. sure it will work, but the video is not going to autosize based on how the visitor is looking at your site.

On the Homepage (this page) the embedded html element is approx 800px wide, whilst if the video is on it’s own page, it will only be approx 690px wide. Then we have the visitor using their mobile phone.. so there is no point using the default code that will be provided, we’re just going to alter it slightly.

We’ve listed 4 videos below, with the code provided to us via the host website, and then the actual code we used to make the videos consistent and responsive where ever your visitors are watching from..

well this works.. from homepage to own page.. notice it resizes itself.. always fitting the embedded window … new code I would suggest using this :

<style>
.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<div class="container">
<iframe src="embed.ted.com/talks/anil_seth_how_your_brain_hallucinates_your_conscious_reality" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen class="video"></iframe>
</div>

You can get the code from developers.facebook.com, and then just need to know the url of the facebook video.. In the configurator, the width was set at 800px, as it’s going on the home page.. BUT.. what they don’t seem to mention on the fb page, is you can change the code.. so I made it data-width=”auto” when pasting the code on the site… now you can see on this page, and its own page.. it just fills the embedded window fully :)

example of the fb embed code :

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.10&appId=1372389376171059";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-video" data-href="facebook.com/GTechnology/videos/10155755083417580" data-width="auto" data-show-text="false"><blockquote cite="facebook.com/GTechnology/videos/10155755083417580" class="fb-xfbml-parse-ignore"><a href="facebook.com/GTechnology/videos/10155755083417580">NAB 2017-G-SPEED SHUTTLE XL</a><p>Need to offload video footage and store backups quickly and easily? Learn how the new ev Series G-SPEED Shuttle XL with Thunderbolt 3 offers fast workflow solutions via AbelCine.</p>Posted by <a href="facebook.com/GTechnology">G-Technology</a> on Thursday, 27 April 2017</blockquote></div>

interestingly it asks for the size as you get the embed code.. but that doesn’t mean we can’t change it… right ? The original embed code from vimeo is :

<iframe src="player.vimeo.com/video/219709265?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

The width and height are fixed, but we can just use the same code as we did before to get the fluid resizing from the home page to it’s own page..

embed code used :

<style>
.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<div class="container">
<iframe src="player.vimeo.com/video/219709265?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="video"></iframe>
</div>

We can do similar with youtube embedding. If you go to your video in youtube, they will give you an embed code like this :

<iframe width="560" height="315" src="youtube.com/embed/paYdLbTFUaI" frameborder="0" allowfullscreen></iframe>

You can simply paste that into an embedded window on a grid site, and it will appear…

Few issues though, it won’t size well on a mobile device, it will be small and look terrible, and basically if you’re going to do it.. do it right…

Using the code below.. we now have a responsive video, whether here on the homepage, on a mobile phone, or on it’s own page…

<style>
.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<div class="container">
<iframe src="youtube.com/embed/paYdLbTFUaI" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="video"></iframe>
</div>