Optimal, Responsive Solutions for Video Embedding

Hello all,

I am trying to embed videos on my landing pages. :ribbon:

Here is the first page I am implementing some videos: http://www.worldreviewgroup.com/music/bluesguitarlessons.html .

The videos do display, but it breaks my responsive layout because the heights of the videos, etc. do not adapt (or still display at small page widths). I need to know if it’s possible to use percentage heights/widths to make the videos fluid within the design.

This the way my test code is stuctured (line 35, bluesguitarlessons.html).

                    <div>
                        <iframe src="//fast.wistia.net/embed/iframe/oee4rydapy?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="388"></iframe><script src="//fast.wistia.net/assets/external/E-v1.js"></script>
                        <object width="640" height="388">
                            <param name="movie" value="//fast.wistia.net/embed/iframe/oee4rydapy?videoFoam=true"></param>
                            <param name="allowFullScreen" value="true"></param>
                            <param name="allowscriptaccess" value="always"></param>
                            <embed src="//fast.wistia.net/embed/iframe/oee4rydapy?videoFoam=true" type="text/html" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
                        </object>
                    </div>

I put a containing div around it. Maybe that should be targeted with CSS.
I don’t think it matters which type of embed gets removed. I have an object element and an iframe (AKA inline frame). I read that neither really matters for SEO purposes, but maybe you will say differently.

Do you have any ideas where I should go with this? :relieved:

Have you tried substituting a <video> tag?

You should also get rid of the unnecessary <embed> tag if you go with the <object> version.

Hi Felgall,

Okay. So I did just attempt to use a <video> tag. It does not seem to be working with the following HTML:

<video width="320" height="240" controls>
<source href="//fast.wistia.net/embed/iframe/oee4rydapy?videoFoam=true" type="video/mp4">
                        Your browser does not support the video tag.
</video>

This displays an error inside reading: “No video with supported format and MIME type found”. I didn’t even see the video when I set the type to video/ogg.

However, it does display underneath the failed video tag through this current HTML: :confused:

`<div class="videobox">
<object width="auto" height="auto">
<embed src="//fast.wistia.net/embed/iframe/oee4rydapy?videoFoam=true" type="text/html" width="560" height="315" allowscriptaccess="always" allowfullscreen="false"></embed>
 </object>
 </div>`

I applied a class of “videobox” for the wrapping div. I noticed that targeting videobox in any way in the CSS could make any changes (such as centering the video or manipulating the video frame height). :neutral_face:

I am not hosting this video file currently. Is that what I should do? Maybe just hosting them on YouTube will allow for better implementation into my site design based upon what some other people have done to embed videos on their site (preferably without any Facebook like :point_down: button or Twitter Tweeter :baby_chick: button). I don’t want any links to external websites like YouTube, and I would like to disable the full screen option.

Page link: http://www.worldreviewgroup.com/music/bluesguitarlessons.html

Thanks for writing back. :raised_hand:

No that will not work. :ng:

You really need to host the actual videos themselves on your server. :sunglasses:

The correct formats to use can be found here…

Media formats supported by the HTML audio and video elements

If you would rather just use your existing “iframe element” then the
following code will make it responsive…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>responsive iframe</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background: #f0f0f0;
 }

.videobox {
    position: relative;
    width: 60%;

/* aspect ratio of the embed is 388/640 which equals 0.60625 */
/* padding-top value is width*0.60625 */

    padding-top: 36.375%;
        margin: 1em auto;
        box-shadow: 0.5em 0.5em 0.5em #999;
 }

.videobox iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
 }
</style>

</head>
<body>

<div class="videobox">
 <iframe src="http://fast.wistia.net/embed/iframe/oee4rydapy?videoFoam=true" width="640" height="388"</iframe>
</div>

</body>
</html>

coothead

2 Likes

Current link: http://www.worldreviewgroup.com/music/bluesguitarlessons.html

Wow! That’s looking on the right track. :watermelon::runner:
Why is there relative and absolute positioning for the iframe?:confused:

I went ahead and uploaded the video file to the host server, so now the HTML for the iframe is such:
<div class="videobox"> <iframe src="videos/guitarlessons1.mp4" width="640" height="388"></iframe> </div>

The Facebook and Twitter buttons are still there. I don’t know if those are being displayed on the part of the mp4 video file, but let me know if that’s something that can be feasibly accomplished.

Best,
Tyler

Hi there etidd,

now that we have the actual video we can do away with both the
“iframe element” and it’s “containeing div”. :sunglasses:

This code now makes the video responsive with fullscreen facility…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>responsive video</title>

<link rel="stylesheet" href="yourpage.css" media="screen">

<style media="screen">
body {
    background: #f0f0f0;
 }
.videobox {
    display:block;
    width:60%;
    margin: 1em auto;
    box-shadow: 0.5em 0.5em 0.5em #999;
  }
</style>

</head>
<body> 

<video class="videobox" controls>
 <source src="http://www.worldreviewgroup.com/videos/guitarlessons1.mp4" type="video/mp4">
</video>

</body>
</html>

coothead

Hey, coothead,

It seems that putting the video file on my server is not allowing the video to show up or to be accessed. What is being shown right now is the home page screen within the iframe instead of playing the video file. Perhaps I have not properly hosted the video file in a place that is accessible with pause functionality. The page doesn’t know how to render the video.

I have to take a step back because the video file is not showing anymore. :grimacing:

How do I diagnose this problem? :astonished:

Nevermind, :weary: I hadn’t uploaded the latest saved HTML file.
Looks good! :cow: The buttons are now not there, which is great. This looks about ready to go! :soccer:

Is this video implementation limited to just one size of video, or will this work as a solution for any video files?

Page: http://www.worldreviewgroup.com/music/bluesguitarlessons.html

Hi, Ty.

I’d like to recommend that you delete or reduce the min-width from .outer. 470px is triggering a horizontal scroll bar at narrow widths.

#outer {
    display: table;
    table-layout: fixed;
    border-spacing: 0;
    max-width: 960px;
    min-width: 470px;   /* DELETE or REDUCE to about 300px */
    margin: 0 auto;
}

Conversely, you can apply a min-width to the .videobox to limit the minimum width to something greater than 60% of the container width. eg:

.videobox {
    display:block;
    width:60%;
    min-width:300px;  /* or thereabouts */
    margin:1em auto;
    box-shadow:0.5em 0.5em 0.5em #999;
}

Ronpat,

You’re so keen at testing and noticing these little things. :mag_right: I am becoming more meticulous, but I was spreading and shrinking the page, not noticing the horizontal scroll bar being triggered.

I went with your first suggestion and changed the min-width value to 300 px. I didn’t see a horiz. scroll bar appear until the page hit that very narrow 300 pixel width. It should be ideal now, agreed?

-ty :cat:

1 Like

I wasn’t very clear, but those were two unrelated suggestions.

First, just FYI, there really is no need to assign a minimum with to .outer. It should adapt to the smallest possible viewport without being limited by a min-width setting and it does that nicely. Take a glance at your home page. The structure is similar and there is no min-width assigned.

The second suggestion was about the width of the videos. I noticed that the top vid becomes a bit wacky at narrow widths (that’s a technical term that means the display area loses its aspect ratio and the controls intrude on the text below ).

Screenshots and Firebug code show that adding a min-width to the width of .videobox preserves the image display at the narrowest widths. I had suggested a min-width of 300px, but that would be too wide… 240px seems much better. See what you think.

As it is now:

After adding {min-width:240px}:

1 Like

Yes. He’s a little star. But we don’t say it too loud. His ego could boost to the ceiling :stuck_out_tongue:

3 Likes

Ronpat,
Okay. I see that in your Firefox browser, there was some weirdness making the video encroach on the text below it. I don’t think I saw that in my browser.

I have adjusted videobox2 to have a min-width of 240 px per your suggestion.

May as well apply that min-width to .videobox(1) as well. That way both vids will have the same width as the viewport approaches 300px.

strummmm, strummmm. :guitar:

2 Likes

Strummm strummmm, indeed. :guitar:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.