Video Players Embedding

Video Players Embedding

Web and Mobile

All codes required to embed any video in your website or blog, following this you will be able to embed Youtube, Facebook, and Google drive

Jump to Learn

Video Players Embedding
Table of Content

    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/

    Green Mind Blog

    Contact Us

    Need More Information about the blog owners? We are Green Mind Agency

    About Us Contact Us