Video Players Embedding

Web and Mobile

Learn how to embed video players on your website or blog. Follow step-by-step instructions to enhance user experience and engagement.

Jump to Learn

Video Players Embedding

Google Drive video embedding

Adding the direct code from Google Drive will not work for smartphones, we found the below solution, make sure to change VIDEOID to your video shared id, and you can test it in an incognito window to make sure it’s working without access requesting

<video class="videoplayer" preload="metadata" controls="controls">
 <source src="https://drive.google.com/uc?id=VIDEOID#t=2&export=download&authuser=0"
 type="video/mp4"></video>

Example below, replaced parameter: 1PsjTXDljKp8R0asi-5pizjnnc-Z0uT-_


jsbin example: https://jsbin.com/tosiwox/edit?html,output

To make the video play always auto played in all mobiles and desktop use the below:

<video id='video1' autoplay='autoplay' controls autoplay loop muted playsinline><source src='img/video-1586279558.mp4' type='video/mp4'>[%videopath%] Your browser does not support HTML5 video.</video>

You can also Add preload=”metadata” to HTML5 video tag and the second of the first frame #t=0.5 to your video source

 

YouTube Video Embedding

The example below will show up it easily, make sure you need to use bootstrap to make this happen.

<div class="youtube embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/VIDEOID?rel=0"></iframe> </div>

The example below, replaced parameter: sJBhWEpjmms

Embed Facebook Video

Adding this code with changing the VIDEOID will do the job

<div class="flex-video widescreen">
 <iframe src="https://www.facebook.com/plugins/video.php?href=VIDEOID&width=500&show_text=false&appId=1301774086510306&height=280" width="100%" height="480" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>
 </div>

The example below, replaced parameter: https://www.facebook.com/greenmindagency/videos/692259351352719/

Table of Content