Responsive Embed Guide

Responsive Embed Vid Guide

Make your Embed videos responsive simple way :

Option 1:-

Have you ever tried to make a YouTube video responsive? If so, it can be somewhat tricky. I came across a small problem when adding a video from YouTube to one of my blog posts about the Childish Gambino website that we created. Since this website is fully responsive, I needed the YouTube video to re-size depending on the browser size or device width. However, when I added the embed code, the video had a fixed height and width. (uggh!) This looked fine on desktop computers, but pretty much broke the design when viewing on a mobile device. I wanted to know how to make a youtube video mobile. Therefore, we needed a responsive YouTube embed code. One would think that videos that with 100% width would automatically resize to the surrounding container. Well, that is not the case. Surprisingly, Youtube does not automatically have a responsive embed code.

The fix was actually quite simple. Here’s how to make a youtube video mobile. You will need to wrap the responsive youtube embed code with a

and specify a 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. This will force the embed elements to expand fullwidth automatically. Awesome! Exactly what we need. you will need to add the following to your style sheet.

Css

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Option 2:-

First of all add new plugin screen to WordPress Dashboard on your system.
Now navigate to upload tab.
Browse the plugin file of Easy video Player on computer. It must be in Zip file format.
Now hit the Install Now option and then click on activate button.
Finally move to the settings menu of your new plugin and follow basic instructions for embedding videos to WordPress.

You need to copy the code from easy video player platform and then paste it over WordPress platform. If you want to upload multiple videos then keep on copying code from easy video player window in sequence and paste them on wordpress dashboard one by one.

Now you can update the required video settings by adjusting video height, width and fullscreen like options. Refresh your window after making all settings and your video will soon appear on screen.

Option 3:-

Below code is responsive HTML5 video. Options below show how to use 4 video types (for high compliance), or how to use just one video type for, not all, but most browsers. The fallback is the text note. Code from the “older code” section on this page can be used to replace the text note for fallback. Use in HTML5 webpages for the best results.

#Begain

<div class=”Rvideo-box”>
<video autoplay controls preload=”auto” id=”myvideo”>
<source src=”HTML5Video/yourvideo.mp4″ type=”video/mp4″>
<source src=”HTML5Video/yourvideo.m4v” type=”video/mp4″>
<source src=”HTML5Video/yourvideo.ogv” type=”video/ogg”>
<source src=”HTML5Video/yourvideo.webm” type=”video/webm”>
<div class=”Rvideo-nosupport”>
*Your web browser does not support HTML5 video*<br>
</div>
</video>
<div class=”Rvideo-caption”>
Sample HTML5 Responsive Video<br>
</div>
</div>

#End

Leave a Reply

Your email address will not be published. Required fields are marked *