Williamwolff.org
Bill WolffWeb Design and Development, Fall 2019Responsive Video EmbedIf you copy & paste this content, you may need to fix the quotation marks so they are " and not “. This tutorial is borrowed from 1: CSSFirst, create the video-responsive class, which creates the box to put the video in..video-responsive{ overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0;}Second, style the iframe so that the video will be positioned correctly in the box and 100% responsive..video-responsive iframe{ left: 0; top: 0; height: 100%; width: 100%; position: absolute;}Step 2: HTMLCreate the video-responsive class in your HTML. This can go anywhere in the <body></body> (such as in your left and right sections), but remember if you add a heading before it, you’ll need the <header></header> and <section></section> tags, too. <div class="video-responsive"> </div> <!-- end video-responsive -->Step 3. Get the Embed code.Go to the video you want to embed. Click share and copy the embed code.Step 4. Paste the embed code.Paste the embed code between in your video-responsive class.<div class="video-responsive"><iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <!-- end video-responsive -->Step 5. Save and upload your portfolio.html and main.css.Step 6. See a responsive video on your site! Important NoteBecause video-responsive is a class, it can be used multiple times on your site so you can embed multiple videos. ................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related searches
- bcps org jobs
- smartcu org sign on page
- aarp org membership card registration
- free org email accounts
- hackensackumc org pay bill
- get my transcripts org from college
- bcps org community volunteer info
- my access tgh org portal
- bcps org employee self service
- intranet florida hospital org employee
- typical finance org chart
- org chart for finance department