Ultimate Youtube shortcode


#1

This here is the ultimate youtube shortcode. Works because:

  • It respects user privacy (they go to youtube to see the content, but you can warn them before).
  • It works on mobile devices.
  • It give us Small Business Points ™ by directing traffic to medium sized companies who can use it to show their investors how much traffic they got.
  • It uses Youtube.
  • Co$t effective for us.
  • Guerrilla Marketing Certified

Why it works on Mobile

As users, it is a royal pain in the a$s to attempt playing an embeded video only to see how it takes us to youtube when we only wanted to play the video inside the page. This shortcode solves that by using a mp4 in continuous loop. The mp4 works on all mobile devices right out of the box.

Why is Guerrilla Marketing Certified

With this shortcode, we are using their weapons against them.

We, until now:
<Iframe> or <div> with a thumb image of the video and a ugly play button on top. Hit play, the image disappears (clearly, as we get to see a white flicker after the image disappears from the DOM) and the video loads in its place. Lots of jQuery, lots of Javascript for it to work.

From now on, with the Ultimate Youtube Shortcode™
Standard <video>, mp4 and <div> tags. No jQuery, no Javascript used. No static thumbnail. Video on loop, even on mobile devices.

Why it works?

We are achieving the same effect they are getting people used to when browsing Instagram or Facebook, even Twitter. The video is playing all the time in continuous loop with a “no sound” icon. People clicks the video, the video plays with sound.

We do exactly the same. We show a video in continuous loop, we show a “unmute” icon and we get to play it on mobile devices as well. The only difference is that we send people to youtube instead of playing it withing the page.

Advantages of this method:

  1. We get to send traffic to a medium sized company running mp4 videos. They receive traffic, they have something to show their investors. They stay in the market.
  2. We send people to Youtube, which works in our favor since we can show a GDPR text in the link, freeing us from all the GDPR code maintenance.
  3. We don’t make our page sluggish with the Youtube embed video code once it is loaded.
  4. Works on mobile devices, just like Facebook, Twitter or Instagram work. Better user experience for people.
  5. We can use lazy loading for the mp4 video (in my case, imgur)

HOW IT LOOKS:

HOW TO USE IT:

{{< youtubebtn woJRmoB8DfA 69TsOhl >}}

The first variable is the Youtube video ending, the second is the mp4 video.

THE SHORTCODE:

<a href=“https://www.youtube.com/watch?v={{ .Get 0 }}” target="_blank" class=“youtubebtn”>

<div>

<video autoplay="" muted="" loop="" playsinline="">

<source class=“lazy” data-src=“https://i.imgur.com/{{ .Get 1 }}.mp4” type=“video/mp4” src=“https://i.imgur.com/{{ .Get 1 }}.mp4”>

</video>

</div>

<p class=“text-center”>Click to watch with sound on Youtube</p>

</a>

THE CSS:

    /// YOUTUBE BTN
    /// usage: {{< youtube mp4 youtube >}}

    .youtubebtn {
        position: relative;
    
    &:hover {
        div::after {
            opacity: 1;
        }
    }

    div {
        position:relative;

        &::after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 18px;
            background: url("../img/unmute.png");
            background-repeat: no-repeat;
            background-position: 3% 96%;
            background-size: 150px;
            opacity: .7;
        }
    }        
    video {
        position: relative;            
        margin: 0;      
        border-radius: 8px;      
    }//video
   
    .text-center {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 15px;

        &::after {
            content: "";
        }
    }//text-center
}//youtubebtn

You can check out a demo over The Free Bundle (https://www.thefreebundle.com/issue-2/) next week.