Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix video examples overflowing container #3866

Merged
merged 1 commit into from
Jun 24, 2022
Merged

Fix video examples overflowing container #3866

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions _assets/sass/base/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
img {
max-width: 100%;
}

div {
min-width: 0;
}


4 changes: 4 additions & 0 deletions _assets/sass/components/_pb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,10 @@
}
}

.pb-code-hl-wrap {
width: 100%;
}

.highlight, .pb-code-hl {
margin-top: 20px;
margin-bottom: 20px;
Expand Down
10,043 changes: 10,042 additions & 1 deletion assets/css/main-bundle.css
View file
Open in desktop

Large diffs are not rendered by default.

28 changes: 13 additions & 15 deletions examples/video/crossplayer/flowplayer/pb-cp-flowplayer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h1>{{ page.title }}</h1>
</div>

<!--video warning-->
<div class="pb-alert pb-alert-important" style="width:60vw;">
<div class="pb-alert pb-alert-important">
<p style="color:#85720f"><b>Important:</b>
This example uses a test version of Prebid.js hosted on our CDN that is not recommended for production use. It includes all available adapters. Production implementations should build from source or customize the build using the Download page to make sure only the necessary bidder adapters are included.</p>
</div>
Expand All @@ -42,16 +42,16 @@ <h1>{{ page.title }}</h1>
<!--video code fencing-->

<!--header code example-->
<div class="pb-alert pb-alert-warning" style="width:60vw;">
<div class="pb-alert pb-alert-warning">
<p style="color:#a94443"><b>Warning:</b>
Do not forget to exchange the placementId in the code examples with your own placementId!</p>
<p style="color:#a94443">
To allow the Cross-Player plugin to load your custom build of Prebid.js ensure that the option key `prebidPath` is set to the custom build's location. If `prebidPath` is not set, the plugin will point to `//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js`.</p>
</div>

<div style="width:60vw;">
<h4>Place this code in the page header.</h4>
<pre class="pb-code-hl" style="width:60vw;">
<h4>Place this code in the page header.</h4>
<div class="pb-code-hl-wrap">
<pre class="pb-code-hl">
<!--put javascript code here-->
&lt;link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/stable/style/flowplayer.css"&gt;
&lt;script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"&gt;&lt;/script&gt;
Expand Down Expand Up @@ -118,14 +118,13 @@ <h4>Place this code in the page header.</h4>

&lt;/script&gt;
&lt;script src="//acdn.adnxs.com/video/plugins/cp/PrebidPluginCP.min.js" onload="doHeaderBidding()"&gt;&lt;/script&gt;
</pre>
</pre>
</div>

</div>

<!--body code example-->
<div style="width:60vw;">
<h4>Place this code in the page body.</h4>
<pre class="pb-code-hl" style="width:60vw;">
<h4>Place this code in the page body.</h4>
<div class="pb-code-hl-wrap">
<!--body code example-->
<pre class="pb-code-hl">
<!--put body html and javascript here-->
&lt;div id="player"&gt;&lt;/div&gt;
&lt;!--video player div--&gt;
Expand Down Expand Up @@ -198,9 +197,8 @@ <h4>Place this code in the page body.</h4>
player.ads.on(flowplayer.AdEvents.AD_SKIPPED, toggleDisabled(true));

&lt;/script&gt;

</pre>
</div>
</pre>
</div>

</div>
</div>
Expand Down
40 changes: 19 additions & 21 deletions examples/video/crossplayer/jwplayer/pb-cp-jwplayer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h1>{{ page.title }}</h1>
</div>

<!--video warning-->
<div class="pb-alert pb-alert-important" style="width:60vw;">
<div class="pb-alert pb-alert-important">
<p style="color:#85720f"><b>Important:</b>
This example uses a test version of Prebid.js hosted on our CDN that is not recommended for production use. It includes all available adapters. Production implementations should build from source or customize the build using the Download page to make sure only the necessary bidder adapters are included.</p>
</div>
Expand All @@ -28,16 +28,16 @@ <h1>{{ page.title }}</h1>
<!--video code fencing-->

<!--header code example-->
<div class="pb-alert pb-alert-warning" style="width:60vw;">
<div class="pb-alert pb-alert-warning">
<p style="color:#a94443"><b>Warning:</b>
Do not forget to exchange the placementId in the code examples with your own placementId!</p>
<p style="color:#a94443">
To allow the Cross-Player plugin to load your custom build of Prebid.js ensure that the option key `prebidPath` is set to the custom build's location. If `prebidPath` is not set, the plugin will point to `//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js`.</p>
</div>

<div style="width:60vw;">
<h4>Place this code in the page header.</h4>
<pre class="pb-code-hl" style="width:60vw;">
<h4>Place this code in the page header.</h4>
<div class="pb-code-hl-wrap">
<pre class="pb-code-hl">
<!--put javascript code here-->
&lt;script type="text/javascript"&gt;
var options = {
Expand All @@ -46,12 +46,12 @@ <h4>Place this code in the page header.</h4>
sizes: [640,480],
mediaTypes: {
video: {
context: 'instream',
playerSize: [640, 480],
mimes: ['video/mp4'],
protocols: [1, 2, 3, 4, 5, 6, 7, 8],
playbackmethod: [2],
skip: 1
context: 'instream',
playerSize: [640, 480],
mimes: ['video/mp4'],
protocols: [1, 2, 3, 4, 5, 6, 7, 8],
playbackmethod: [2],
skip: 1
}
},
bids: [
Expand Down Expand Up @@ -85,14 +85,13 @@ <h4>Place this code in the page header.</h4>

&lt;/script&gt;
&lt;script src="//acdn.adnxs.com/video/plugins/cp/PrebidPluginCP.min.js" onload="doHeaderBidding()"&gt;&lt;/script&gt;
</pre>
</pre>
</div>

</div>

<!--body code example-->
<div style="width:60vw;">
<h4>Place this code in the page body.</h4>
<pre class="pb-code-hl" style="width:60vw;">
<h4>Place this code in the page body.</h4>
<div class="pb-code-hl-wrap">
<!--body code example-->
<pre class="pb-code-hl">
<!--put body html and javascript here-->
&lt;div id="myElement1"&gt;&lt;/div&gt;

Expand Down Expand Up @@ -158,9 +157,8 @@ <h4>Place this code in the page body.</h4>
invokeVideoPlayer(null);
});
&lt;/script&gt;

</pre>
</div>
</pre>
</div>

</div>
</div>
Expand Down
40 changes: 20 additions & 20 deletions examples/video/crossplayer/videojs/pb-cp-videojs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h1>{{ page.title }}</h1>
</div>

<!--video warning-->
<div class="pb-alert pb-alert-important" style="width:60vw;">
<div class="pb-alert pb-alert-important" >
<p style="color:#85720f"><b>Important:</b>
This example uses a test version of Prebid.js hosted on our CDN that is not recommended for production use. It includes all available adapters. Production implementations should build from source or customize the build using the Download page to make sure only the necessary bidder adapters are included.</p>
</div>
Expand All @@ -33,16 +33,16 @@ <h1>{{ page.title }}</h1>
<!--video code fencing-->

<!--header code example-->
<div class="pb-alert pb-alert-warning" style="width:60vw;">
<div class="pb-alert pb-alert-warning" >
<p style="color:#a94443"><b>Warning:</b>
Do not forget to exchange the placementId in the code examples with your own placementId!</p>
<p style="color:#a94443">
To allow the Cross-Player plugin to load your custom build of Prebid.js ensure that the option key `prebidPath` is set to the custom build's location. If `prebidPath` is not set, the plugin will point to `//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js`.</p>
</div>

<div style="width:60vw;">
<h4>Place this code in the page header.</h4>
<pre class="pb-code-hl" style="width:60vw;">
<h4>Place this code in the page header.</h4>
<div class="pb-code-hl-wrap">
<pre class="pb-code-hl" >
<!--put javascript code here-->
&lt;!-- use recent version of videojs to ensure proper functioning with the iOS devices --&gt;
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video-js.css"&gt;
Expand All @@ -58,12 +58,12 @@ <h4>Place this code in the page header.</h4>
sizes: [640,480],
mediaTypes: {
video: {
context: 'instream',
playerSize: [640, 480],
mimes: ['video/mp4'],
protocols: [1, 2, 3, 4, 5, 6, 7, 8],
playbackmethod: [2],
skip: 1
context: 'instream',
playerSize: [640, 480],
mimes: ['video/mp4'],
protocols: [1, 2, 3, 4, 5, 6, 7, 8],
playbackmethod: [2],
skip: 1
}
},
bids: [
Expand Down Expand Up @@ -98,14 +98,13 @@ <h4>Place this code in the page header.</h4>
&lt;/script&gt;
&lt;script src="//acdn.adnxs.com/video/plugins/cp/PrebidPluginCP.min.js" onload="doHeaderBidding()"&gt;&lt;/script&gt;

</pre>
</pre>
</div>

</div>

<!--body code example-->
<div style="width:60vw;">
<h4>Place this code in the page body.</h4>
<pre class="pb-code-hl" style="width:60vw;">
<h4>Place this code in the page body.</h4>
<div class="pb-code-hl-wrap">
<!--body code example-->
<pre class="pb-code-hl" >
<!--put body html and javascript here-->
&lt;div class="example-video-container"&gt;
&lt;video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{}' width='640' height='480'&gt;
Expand Down Expand Up @@ -207,8 +206,8 @@ <h4>Place this code in the page body.</h4>
});

&lt;/script&gt;
</pre>
</div>
</pre>
</div>

</div>
</div>
Expand Down Expand Up @@ -291,3 +290,4 @@ <h4>Place this code in the page body.</h4>
});
</script>
<script type="text/javascript" src="/assets/js/video/pb-code-highlight.js"></script>
</div>
Loading