I incorporated a YouTube video using the iframe tag, but encountered an issue where the page would not scroll up or down when the mouse cursor was positioned on the iframe

How would you like your HTML code to function? When the cursor is on the iframe, do you want it to play a video? Also, should the parent page scroll when you scroll?

<section class="section section-padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-title text-center">
                    <h2>Our Process</h2>

                </div>
            </div>
            <div class="col-lg-6">
                <div class="">
                    <iframe width=560 height=315 src="https://www.youtube.com/embed/wYHA_qStcqE?rel=0&controls=0&showinfo=0" frameborder=0  allowfullscreen></iframe>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="content">
                   <iframe width=560 height=315 src="https://www.youtube.com/embed/sy41imOrHbg?rel=0&controls=0&showinfo=0" frameborder=0 allowfullscreen></iframe>

                </div>
            </div>
        </div>
    </div>
</section>

Answer №1

You have the option to include the "scrolling" attribute in your code.

<section class="section section-padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-title text-center">
                    <h2>Our Process</h2>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="">
                    <iframe scrolling="yes" width=560 height=315 src="https://www.youtube.com/embed/wYHA_qStcqE?rel=0&controls=0&showinfo=0" frameborder=0  allowfullscreen></iframe>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="content">
                   <iframe scrolling="yes" width=560 height=315 src="https://www.youtube.com/embed/sy41imOrHbg?rel=0&controls=0&showinfo=0" frameborder=0 allowfullscreen></iframe>

                </div>
            </div>
        </div>
    </div>
</section>

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

What are some ways to utilize a Bootstrap modal button embedded within a clickable row?

Having a strange issue in my project. I am trying to incorporate a modal button inside a link-able row. However, when I click the button to trigger the modal id, it pops up and then redirects to the myexample.com page, which is expected behavior. While I ...

Issues with playing Html 5 video arise when making an ajax call

My goal is to implement an AJAX call followed by displaying an HTML5 video. The provided code snippet seems to be ineffective. $.ajax({ type: "POST", url: "Videos.aspx/GetBlocs", contentType: "application/json; charse ...

Container that can be scrolled under varying heights

Trying to structure some CSS in order to create a website that resembles the layout of a typical desktop application: Almost there, but struggling to make the scrollable panel stick to the bottom of the viewport and show a scrollbar instead of overflowing ...

How can you assign a value to an HTML Input by dragging an SVG shape or canvas?

I am currently in the process of creating a user interface for setting pricing parameters. There are three categories that need to be visually represented, along with two sliders to determine suggested Buy/Sell prices. To demonstrate my progress so far, I ...

Design an arrangement using div elements and CSS styling

Creating a layout for a website can be challenging. I am using three div tags - container, left, and right. My goal is to have the left side fixed-width for navigation, while the right side displays dynamic content loaded from a database. However, I'm ...

Displaying content on the <div> element

Looking for recommendations for a jQuery plugin or JavaScript solution that allows me to load a full "view" into a <div> when a user clicks on a link. The challenge I'm facing is that I have 8 pages, with the Homepage consisting of 3 divisions: ...

Is there a substitute for HtmlUnit on Android?

Is there a different solution available that can help me complete an HTML form containing checkboxes and radio buttons? I was in the process of developing an Android application that requires user input, sends the data to a website with an HTML form, fill ...

It is impossible for tailwind to overflow while attempting to adjust the menu to the screen size

Here is the full code snippet: https://jsfiddle.net/3Lapnszc/1/ I am attempting to adjust the left navigation menu on the screen. <main class="flex flex-grow w-full h-screen"> <aside class="w-80 h-screen bg-gray shadow-md w-full hidden sm: ...

Excess space creating horizontal and vertical scrolling issues on an HTML webpage

Currently, I am experimenting with CSS effects. In my code, I have included div elements to display balls on the document body, each with random sizes and colors. However, an unexpected issue has arisen - excess scroll space is being generated due to the c ...

Exploring the world of CSS and designing layouts using multiple div elements

Upon reviewing this website, I must admit it is getting close to what I envision. However, being a perfectionist and new to HTML and CSS, I find myself struggling to achieve the desired outcome. The layout consists of two divs named topred and top yellow, ...

Tips for separating these two words onto two separate lines

I created this box using Angular Material, but I am having trouble breaking the words "1349" and "New Feedback" into two lines. Here's an image included in my design. Any tips on accomplishing this in Angular Material? Thank you! <style> . ...

Complete Form Validation Issue Unresolved by Jquery Validation Plugin

I'm facing an issue with the jQuery validation plugin while attempting to validate a form. Strangely, it only works for one input field. Can anyone suggest a solution? <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.valid ...

Having trouble viewing a dynamically adjusting Angular NVD3 graph embedded in bootstrap

I have been utilizing the NVD3 library along with bootstrap 3.0 for my project. I have two divs with the classes "col-md-6 col-sm-12" positioned side by side. My goal is to showcase charts in both of these divs. To ensure that the charts are displayed corr ...

The 'data-intro' property cannot be bound to the button element as it is not recognized as a valid property

I've been using the intro.js library in Angular 8 and so far everything has been working smoothly. However, I've hit a roadblock on this particular step. I'm struggling to bind a value in the data-intro attribute of this button tag. The text ...

Is there a way to add Internet Explorer specific stylesheets to the Wordpress functions directory using enqueue?

I'm facing challenges setting up my Wordpress theme to be compatible with early versions of Internet Explorer. Most online tutorials have advised me to enqueue specific I.E stylesheets in the header, but this method has not been successful for me. Add ...

Ensuring Consistent Item Widths in a Loop using JavaScript or jQuery

In my code, I created a function that dynamically adjusts the width of elements in a loop to match the widest element among them. // Function: Match width var _so20170704_match_width = function( item ) { var max_item_width = 0; item.each(function ...

What is the best way to ensure that these social icons are perfectly centered on the page across all web browsers?

Visit my website here: foxweb.marist.edu/users/kf79g/contact.php I'm stuck on the final step needed to deploy my website and finish it. The issue I'm facing is with the social icons when viewed on medium and small screens. I want them to be cent ...

Why is the dropdown bootstrap component not functioning in the browser?

The dropdown-item in my code, taken from the Bootstrap site, is not working properly. The toggle displays but the item does not. What could be causing the Bootstrap dropdown component to malfunction in the browser? Are there any issues with my CDNs? ...

Confusion arises when using Materialize CSS for selecting elements

Currently, I am working on an app using Cordova. Within this project, I have incorporated jQuery Mobile's CSS and JS along with Materialize CSS and JS. However, I recently encountered an issue after integrating the Materialize files. Specifically, whe ...

Revamp the HTML page by automatically refreshing labels upon every Get request

My HTML webpage requires real-time updates for one or more labels. To achieve this, I have incorporated CSS and JS animations into the design. Currently, I am utilizing Flask to handle all the calls. I face a challenge where I need to consistently update ...