TUTORIAL LESSON 3: Responsive Video

Difficulty rating: 3.5/5

Description:

Step 1: Installation

To start you need to download fitvids from: FitVid.js import it to the scripts folder & remember to add the FitVid.js & jQuery Library link to your HTML page, before the closing body tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="scripts/fitvids.js"></script>

Step 2: Activate fitvids.js

Insert this Javascript code found here right above the closing body tag.

Javascript

			<script>
	    $(document).ready(function(){
        $(".article").fitVids();
        </script>
        
        

Step 3: Add iFrame Video

In the HTML, use the tag, iFrame video with a class name. Here is used a random video, I picked one from youtube and pasted it inside the iframe and made a div called video.

HTML

            <div class="video">
                <iframe src="https://www.youtube.com/embed/G_Z3lmidmrY" width="420" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                </div>
            

Step 4: CSS !?!

To CSS styles are not necessary for function but can be used to clean up the presentation, in the case up above these were the styles used:

CSS


             article{
             border: 8px solid #cd8066;

             border-radius: 21px;}
             margin: 0 0 2em 1.5em;
             }

             .video {
             width: 100%;
             height: auto;
             }

             .iframe {
             border-radius: 21px;