Creating a responsive YouTube video embed within a div container with a fixed background image

Hello there,

I'm currently working on positioning the YouTube Iframe on the background to make it look like the video is playing on a laptop screen. I also want it to scale down appropriately with the background image on different resolutions.

The website has a width of 100% and the HTML code I'm using is:

    <div class=youtube>
    <div class=youtubesmaller>
     <iframe width="100%" src="https://www.youtube.com/embed/videoseries?list=PLJdPTgbeDGN08yHg1Y46vzwDhj5Nxb-y_" 
   frameborder="0" allowfullscreen></iframe>
    </div>
    </div>

However, I noticed that the Iframe isn't scaling properly with the background-image on different resolutions, so I checked the CSS code:

 /*music page stuff*/

 .youtube {
     background-image: url(http://breakline.nl/wp-content/uploads/2016/08/macbookframe.png?id=353) !important;
     background-size: auto;
     background-repeat: no-repeat;
     background-position: right;
     height: 600px;
 }
 .youtubesmaller {
     width: 51.2%;
     margin-left: 37.4%;
 }
 /*end music page stuff*/

Initially, I tried giving the Iframe a background, but later found out it wasn't possible.

Visit the website page

htmlcsswordpressiframe

Answer №1

Although I won't give you the full solution, I hope that the following code snippets will be of assistance to you.

Modify your code as follows:

.youtubesmaller {
margin-top: 63px;
width: 713px;
height: 446px;
margin-left: 161px;
}

.youtube {
background-image: url(http://breakline.nl/wp-content/uploads/2016/08/macbookframe.png?id=353) !important;
background-size: auto;
background-repeat: no-repeat;
background-position: right;
height: 600px;
width: 1034px;
float: right;
}

In the YouTube iframe, change the height to 100% (style="height: 100%;").

If you wish to scale it, refer to CSS for screen resolution - CLICK HERE

Please leave a comment to let me know if this information was helpful to you :)

Answer №2

After following your request, I successfully made it work.

Initially, I included the set height and width to your iframe:

<iframe width="714px" height="450px" src="https://www.youtube.com/embed/videoseries?list=PLJdPTgbeDGN08yHg1Y46vzwDhj5Nxb-y_" frameborder="0" allowfullscreen="" style=""></iframe>

Next, I specified the width on your wrapper in pixels (although it may not be responsive since your page isn't designed that way). I also added float right and position relative:

.youtube {
    background-image: url(http://breakline.nl/wp-content/uploads/2016/08/macbookframe.png?id=353) !important;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: right;
    height: 600px;
    ***width: 1039px;
    float: right;
    position: relative;***
}

Then, I absolutely positioned the inner div in the appropriate spot:

.youtubesmaller {
    position: absolute;
    top: 63px;
    left: 165px;
}

I executed these changes directly in your browser's inspector tool, resulting in the screenshot provided here:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using iOS, the video compressing process stops automatically if the screen is no longer active while the file input

I am working on a web application that includes a file upload feature for large videos, typically 30 minutes or longer in duration. When a user on an iOS device selects a video to upload, the operating system will automatically compress it before triggerin ...

javascripthtmliosiphone

Image not found in Rotativa PDF document

We have implemented Rotativa to generate and save a PDF version of our web page on the server. Below is the ASP.NET MVC 4 code snippet used for this purpose: var pdfResult = new ActionAsPdf("Index", new { orderId = orderValidated.orderID }) { FileName = ...

cssasp.netasp.net-mvcpdfpdf-generation

The quickest method to modify the anchor element's class depending on the query string

Requirement - I aim to accomplish this task using only pure JavaScript without any additional libraries, although I am open to using one if necessary. I need to assign an extra class to anchor elements that contain a query string of 'xyz=negate' ...

javascriptjqueryhtml

Is it possible to achieve the lower link set in a pure CSS horizontal menu where the horizontal link set is positioned below horizontal text tabs?

I am attempting to design a pure CSS on-hover horizontal menu. I have made some progress on my design, as shown in http://jsfiddle.net/dq8z192L/11/ The goal is to have a menu that expands horizontally when hovered over. Each tab reveals a set of links be ...

cssmenumenuitem

Create a JavaScript code snippet that replaces the innerHTML of the function document.getElementById with

In my limited knowledge of JavaScript, I have come across an issue with the following code: function example() { document.getElementById("example").innerHTML = "<script>document.write(example)</script>"; } Unfortunately, this code doesn&ap ...

javascripthtmlinnerhtml

iPhone 3GS and 4 not expanding DIVs by 100%

I've been encountering a significant issue with a div that's set to 100%. It displays properly on desktop screens, but on iPhones, there appears to be a gap on the right side. I've attempted to use the following CSS: body { min-width:980p ...

jqueryhtmlioscsswidth

What is the best way to accomplish a smooth transition of background colors similar to this design

I was browsing different websites and stumbled upon this amazing background color transition that caught my attention. I really liked it and now I want to create something similar on my own website. Despite my best efforts, I haven't been able to achi ...

javascriptjqueryhtmlcss

Arrange a line of images in the center

I've been working on aligning images in a row and centering them using flex, but I'm having trouble figuring it out. I managed to center all the images with flex and justify-content center, but setting flex-direction: row on the container doesn&a ...

htmlcssreactjsflexboxmaterial-ui

Error encountered: index.html:17 - An InvalidStateError was thrown when attempting to execute the 'send' function on the XMLHttpRequest object. The object's state must be OPENED in order to send the Ajax request

When attempting to run index.html on a local host with xampp, an error is encountered: index.html:17 Uncaught InvalidStateError: Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED.sendAjax @ index.html: ...

javascripthtmlajax

Enhance iframe with hover effect

I'm currently working on a unique WordPress blog design where images and iframes (YouTube) transition from monotone to color upon hover. So far, I've successfully implemented the grayscale effect for images: img { -webkit-filter: grayscale(100% ...

wordpresscssiframe

Transitioning Dropdowns in Angular UI Bootstrap

Hello everyone, I am completely new to both Stack Overflow and AngularJS. I'm attempting to incorporate a fade-in animation into my dropdown (using UI Bootstrap's dropdown directive) without success. This issue is quite similar to the following ...

cssangularjsangular-ui-bootstrap

Animation effect in Jquery failing to execute properly within a Modal

I have developed a small jQuery script for displaying modals that is both simple and efficient. However, it seems to only work with the fadeIn and fadeOut animations, as the slideUp and slideDown animations are not functioning properly. I am unsure of the ...

javascripthtmljquerycss

JavaScript: inscribe in a specific cell

I have a table cell within a div element and I am trying to display the date for the last Thursday in it: <body> <div> <table id="TableName" width="auto"> <thead> <tr> ... ...

javascriptjqueryhtml

The toggle for hiding and showing, along with changing the button color, is not functioning properly due to

I'm encountering a puzzling issue with a toggle that hides and displays information and changes color on click. The functionality works flawlessly on the page where I initially wrote the code. For instance, the button's background shifts colors w ...

javascripthtml

Issues with checkboxes in HTML 5 showing inconsistent behavior

Utilizing: APS.NET MVC 4.0 Incorporating javascript/jquery to manage check boxes within a table, I have encountered an issue where the code functions correctly during the first and second passes. Initially, it checks all the checkboxes, while on the secon ...

jqueryasp.net-mvchtmlcheckbox

Using jQuery to enhance the functionality of the drop-down select feature

I am facing an issue with my index file code. When I select something from the drop-down menu, I expect to see a related dropdown appear. Although I have added this code to my file, I am unable to get the drop down to show after selecting the main type. ...

javascripthtmljquerycss

Use a JavaScript function on identical IDs

Can someone please help me figure out how to hide multiple divs with the same id using JavaScript? I attempted the following: <script> function filterfunc() { if(document.getElementById('filter_deductible').value == 'id_50'){ ...

javascripthtml

Obtain the chosen option from an HTML select element by utilizing JavaScript

This is my HTML snippet: <div id="detail"> <div class="d_left"> Page <strong>1</strong> of 107 </div> <div class="d_center"> <table> <tr> <td><a href="#">Previous&l ...

javascripthtml

"Failure to manipulate the style of an HTML element using Vue's

<vs-tr :key="i" v-for="(daydatasT, i) in daydatas"> <vs-td>{{ daydatasT.Machinecd }}</vs-td> <vs-td>{{ daydatasT.Checkdt }}</vs-td> <vs-td>{{ daydatasT.CheckItemnm }}< ...

javascriptcssvue.js

Using CSS with multiple background images and the "contain" property

Hey there! Is it possible to have multiple background images stacked on top of each other within a single div? I want the images to resize automatically with "background-size: contain;". Have you tried this before? background-image: url('../img/ima ...

htmlcss